Ng Zorro 的动态面包屑

Question

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

我正在使用自动面包屑：

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

Answer 1

不幸的是，nz-breadcrumb 来自 ng-zorro UI 组件库（当前版本 10.2.1）没有支持动态路径。当您的应用程序中的路由发生变化时，您可以通过在 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>')
  });
}

Ng Zorro 的动态面包屑

Dynamic breadcrumbs on Ng Zorro

breadcrumbs

angular

ng-zorro-antd