Angular2-crumbs 和延迟加载组件

Question

我正在尝试在我的项目中使用Angular2-crumbs 和lazy loader components。不知何故，面包屑工作正常，但我的惰性加载器组件没有加载，也没有在 console 中抛出任何错误。

我从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 {
}

app.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>

root-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 中没有提供额外的文档，所以我不知道如何解决这个问题。

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

谢谢！！！

Answer 1

我已经通过对下面的 root-routing.modules.ts 进行一些小改动解决了这个问题：

root-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 代码后得出的结论是它适用于第一个子组件。

Answer 2

有一个简单的解决方案。

跟踪 breadCrumb 组件的 *ngfor 循环中的最后一个索引。

Angular 为 ngfor 公开局部变量以跟踪循环的元素。

https://angular.io/api/common/NgForOf

替换 angular-crumbs 可定制代码中提到的可定制代码。我在下面使用引导示例进行演示。

发件人：

<breadcrumb #parent>
   <ol class="breadcrumb">
     <ng-template ngFor let-route [ngForOf]="parent.breadcrumbs">
       <li *ngIf="!route.terminal" class="breadcrumb-item">
         <a href="" [routerLink]="[route.url]">{{ route.displayName }}</a>
       </li>
       <li *ngIf="route.terminal" class="breadcrumb-item active" aria-current="page"> 
            {{ route.displayName }}</li>
     </ng-template>
   </ol>
</breadcrumb> }

更改为：

<breadcrumb #parent>
   <ol class="breadcrumb">
     <ng-template ngFor let-route [ngForOf]="parent.breadcrumbs" let-lastIndex="last">
       <li *ngIf="!lastIndex" class="breadcrumb-item">
         <a href="" [routerLink]="[route.url]">{{ route.displayName }}</a>
       </li>
       <li *ngIf="lastIndex" class="breadcrumb-item active" aria-current="page"> 
            {{ route.displayName }}</li>
     </ng-template>
   </ol>
</breadcrumb> }

lastIndex 的值将是一个布尔值。在这里，当我们知道面包屑 ngfor 循环处于最后一个值时，将其标记为活动。

这就是使用延迟加载解决奇妙的 angular-crumbs 库问题的方法。如果您需要示例，请告诉我。