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和延遲加載組件

回答

相關問題