相关疑难解决方法(0)

在我的 Angular (v4) 应用程序中，我正在尝试创建一个面包屑模块​​。我发现这个问题很有帮助，建议我data像这样将面包屑信息存储在路由器的属性中

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

但是我想做的是在 data 属性中存储一个组件，然后让面包屑模块​​提取并呈现它。允许我像这样与面包屑模块​​交互

{ path: '', component: HomeComponent, data: {breadcrumb: CustomViewComponent}}

按照 angular Dynamic Component Loader 指南和有用的博客文章，我尝试让我的面包屑渲染组件执行以下操作：

import { Component, Input, OnInit, AfterViewInit,
  ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

import { MainLogoComponent } from '../my-material/main-logo/main-logo.component';

@Component({
  selector: 'app-breadcrumbs',
  template: `<div #parent></div>`,
  styleUrls: ['./breadcrumbs.component.scss']
})    
export class BreadcrumbsComponent implements OnInit, …

我正在努力解决这个问题:)

我们的想法是拥有一个组件,当通过子视图导航时更新面包屑,例如:

<breadcrumb> Products / Category-C / My-Product </breadcrumb>

Products -> Category-A
         -> Category-B
         -> Category-C  
                  |-> My-Product