Question

我正在尝试在我的项目中使用Angular2-crumbs和lazy loader components。不知怎的，breadcrumb工作正常，但我的懒惰加载器组件没有加载，也没有在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>

根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中进行一些小的更改来解决这个问题：

<强>根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

替换在角屑可定制代码中提到的可定制代码。我在下面使用引导程序示例进行演示。

发件人：

<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循环处于最后一个值时，请将其标记为活动状态。

这就是您通过延迟加载解决奇妙的角屑库问题的方法。让我知道您是否需要示例。

Angular2-crumbs和延迟加载组件

2 个答案: