Angular2-crumbs和延迟加载组件

我想在我的项目中使用Angular2-crumbs和lazy loader components。不知何故面包屑工作正常，但我懒惰的加载程序组件不会加载，也不会在console也引发任何错误。Angular2-crumbs和延迟加载组件

我从Angular2-crumbs code了解到它只适用于儿童组件。由于我的要求是使用延迟加载，所以我所做的是我从app重定向到root组件，其中我有root子组件下的所有延迟加载组件。

app.routing.modules.ts

export const routes: Routes = [ 
{path: '', redirectTo: 'root', pathMatch: 'full'} 
]; 

@NgModule({ 
imports: [RouterModule.forRoot(routes)], 
exports: [RouterModule] 
}) 
export class AppRoutingModule { 
}

app.module.ts

@NgModule({ 
declarations: [ 
    AppComponent 
], 
imports: [ 
    CoreModule, 
    BrowserModule, 
    BrowserAnimationsModule, 
    RouterModule.forRoot(routes) 
] 
providers: [] 
bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

应用：

我的代码的安排下面给出。 component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
}

app.component.html

<router-outlet></router-outlet>

根routing.module.ts

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: '', component: RootComponent, children: [ 
     { path: '', component: HomeComponent }, 
     { 
      path: 'screen/home', component: HomeComponent, data: { breadcrumb: 'Home' }, children:[ 
      { path: 'orders', loadChildren: './../app/orders/module#Module', data: { breadcrumb: 'Order management'} }, 
      { path: 'stocks', loadChildren: './../app/stocks/module#Module', data: { breadcrumb: 'Stock management' } }, 
     ] 
     } 
    ]} 

    ]) 
], 
exports: [ RouterModule ] 
}) 

export class RootRoutingModule {}

root.module.ts

@NgModule({ 
      declarations: [ 
       HomeComponent, 
       RedirectComponent, 
       RootComponent 
      ], 
      imports: [ 
       CoreModule, 
       BrowserModule, 
       BrowserAnimationsModule, 
       BreadcrumbModule.forRoot(), 
       HttpClientModule, 
       RootRoutingModule 
      ], 
      providers: [ 
       BannerService, 
       BlockService, 
       CanDeactivateGuard, 
       ConfirmationService, 
       CoreService, 
       GenericService, 
       HttpClient, 
       MessageService, 
       RedirectComponent, 
      ] 
     }) 
     export class RootModule { 
     }

个

root.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'root', 
    templateUrl: 'src/root/root.component.html', 
    styleUrls: ['src/root/root.component.css'] 
}) 
export class RootComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

}

root.component.html

<breadcrumb></breadcrumb> 
<router-outlet></router-outlet>

有一个在Angular2-crumb repo提供的，所以我没有做任何线索如何解决没有额外的文档这个问题。

如果有人可以帮助我，我会提前感谢你。

谢谢！

来源

2017-10-12 tutorialfeed

我必须做以下根routing.modules.ts一些小的改动解决这个问题：

根routing.modules.ts

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
    { path: '', component: HomeComponent, pathMatch: 'full' }, 
     { 
     path: 'screen/home', component: RootComponent, data: { breadcrumb: 'Home' }, children: [ 
     { path: 'orders', loadChildren: './../app/orders/module#Module', data: { breadcrumb: 'Order management'} }, 
     { path: 'stocks', loadChildren: './../app/stocks/module#Module', data: { breadcrumb: 'Stock management' } }, 
     ]} 
    ]) 
], 
exports: [ RouterModule ] 
}) 

export class RootRoutingModule {}

所以检查后，我的结论Angular2-crumbs代码再次是它可以与第一个子组件一起使用。

来源

2017-10-12 11:17:47 tutorialfeed

Angular2-crumbs和延迟加载组件

回答

相关问题