Ng Zorro 上的动态面包屑答案

【问题标题】：Dynamic breadcrumbs on Ng ZorroNg Zorro 上的动态面包屑
【发布时间】：2020-06-24 15:05:05
【问题描述】：

如何动态更改面包屑？我在频道内有频道我想将面包屑更改为频道/[频道名称]。

我正在使用自动面包屑：

<nz-breadcrumb nz-col nzFlex="auto" [nzAutoGenerate]="true"></nz-breadcrumb>

【问题讨论】：

标签： angular breadcrumbs ng-zorro-antd

【解决方案1】：

很遗憾，ng-zorro UI 组件库（当前版本 10.2.1）中的 nz-breadcrumb 不支持动态路径。您可以通过在应用程序中的路由更改时手动更改 Angular 路由器中的路由项的名称来实现此目的。

import { Router, ActivatedRoute } from "@angular/router";

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    this.router.config
    // ... change the name of routes based on received parameters
  });
}

或者，您可以使用已经实现的库，即ngx-breadcrumbs。

import { BreadcrumbService } from 'xng-breadcrumb';

constructor(private breadcrumbService: BreadcrumbService, private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    breadcrumbService.set('@<alias>', '<breadcrumb label>')
  });
}

【讨论】：