带有动态标签的角面包屑

Question

我想用一个动态项目创建一个面包屑导航。像这样的东西：

主页 > A 类 > 子类 1 > XYZ

其中“类别 A”和“子类别 1”是静态的，“XYZ”是动态的。此动态标签仅在相应组件初始化后才存在，因为内容是从远程服务器加载的。层次结构来自具有子路由的路由器配置。

我尝试通过 访问当前组件ActivatedRoute，但我所能找到的只是组件名称，这在这方面没有帮助。我的下一个想法是观察RouterOutlet变化，但似乎没有任何事件因变化而被触发。

我模糊的想法是让组件实现这样的接口：

interface Named {
  readonly name: Observable<string>
}

...并以某种方式订阅这个 Observable，但为了做到这一点，我需要组件实例！

如何从 RouterOutlet 中当前显示的组件获取计算字符串？

Answer 1

ngOnInit我的建议是使用Route Resolver.

\n

角度路由解析器用于在用户从一个路由重定向到另一路由时预取一些数据。新可用的页面（组件）将已经具有需要在页面中呈现的数据。

\n

基本上，解析器是一个实现Resolve接口的服务：https://angular.io/api/router/Resolve。

\n

来自文档：

\n

\n

该接口定义了resolve()导航启动时调用的方法。路由器等待数据解析后\n路由最终被激活。

\n

\n

在以下示例中，我从层次结构示例中删除了一个级别，并且假设子类别是动态的。

\n

解析器的代码为：

\n

import { Injectable } from \'@angular/core\';\nimport { Resolve, RouterStateSnapshot,ActivatedRouteSnapshot} from "@angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport { Observable, of } from "rxjs";\n\n@Injectable({\n  providedIn: \'root\'\n})\n\nexport class DynamicSubcategoryResolver implements Resolve<any> {\n  \n  constructor(private _http: HttpClient) {}\n\n  resolve(\n    route: ActivatedRouteSnapshot,\n    state: RouterStateSnapshot\n  ): Observable<any> {\n\n    const subcategoryId: string | null = route.paramMap.get("subcategoryId");\n    // other route params are in route.paramMap\n\n\n    // return this._http.get("url");\n    return of({\n      breadcrumb: "(Dynamic breadcrumb) Subcategory " + subcategoryId,\n      foo: "bar",\n      bar: "baz"\n    });\n  }\n} \n

\n

现在，路由定义如下：

\n

const routes: Routes = [\n  {\n    path: "",\n    component: HomeComponent,\n    data: {\n      breadcrumb: "Home"\n    },\n    children: [\n      {\n        path: "category-a",\n        component: CategoryAComponent,\n        data: {\n          breadcrumb: "CategoryA" // static breadcrumb\n        },\n        children: [\n          {\n            path: "subcategory/:subcategoryId",\n            component: DynamicSubcategoryComponent,\n            resolve: {\n              apiData: DynamicSubcategoryResolver\n            }\n          }\n        ]\n      }\n    ]\n  }\n];\n

\n

来自解析器的数据将在以下位置提供：ActivatedRoute.snapshot.data对象中可用：

\n

export class DynamicSubcategoryComponent implements OnInit {\n\n  constructor(private activatedRoute: ActivatedRoute) {}\n\n  ngOnInit() {\n    const data = this.activatedRoute.snapshot.data;\n    console.log("apiData: ", data.apiData);\n  }\n}\n

\n

最后，在面包屑生成器中，代码应如下所示：

\n

const routeData: Data = route.snapshot.data;\n\nif (routeData.breadcrumb) {\n   breadcrumbs.push({\n     label: routeData.breadcrumb, \n     url: url \n   });\n} else if (routeData.apiData && routeData.apiData.breadcrumb) {\n  breadcrumbs.push({\n    label: routeData.apiData.breadcrumb,\n    url: url\n  });\n}\n

\n

完整工作代码：\n https://stackblitz.com/edit/angular-ivy-vuroqk

\n