带有动态标签的 Angular 面包屑

Question

我想创建一个包含一个动态项目的面包屑导航。像这样的事情:

Home > Category A > Subcategory 1 > XYZ

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

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

我模糊的想法是让组件实现这样的接口(interface):

interface Named {
  readonly name: Observable<string>
}

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

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

Answer 1

我的建议是使用Route Resolver，而不是使用组件的 ngOnInit 钩子(Hook)从服务中调用将带来必要数据的方法。

Angular 路由解析器用于在用户从一个路由重定向到另一路由时预取一些数据。新可用的页面(组件)已经具有页面中渲染所需的数据。

基本上，解析器是一种实现 Resolve 接口(interface)的服务:https://angular.io/api/router/Resolve .

来自文档:

The interface defines a resolve() method that is invoked when thenavigation starts. The router waits for the data to be resolved beforethe route is finally activated.

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

解析器的代码为:

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot,ActivatedRouteSnapshot} from "@angular/router";
import { HttpClient } from "@angular/common/http";
import { Observable, of } from "rxjs";

@Injectable({
  providedIn: 'root'
})

export class DynamicSubcategoryResolver implements Resolve<any> {
  
  constructor(private _http: HttpClient) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    const subcategoryId: string | null = route.paramMap.get("subcategoryId");
    // other route params are in route.paramMap


    // return this._http.get("url");
    return of({
      breadcrumb: "(Dynamic breadcrumb) Subcategory " + subcategoryId,
      foo: "bar",
      bar: "baz"
    });
  }
} 

现在，路由定义如下:

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

来自解析器的数据将在:ActivatedRoute.snapshot.data 对象中可用:

export class DynamicSubcategoryComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    const data = this.activatedRoute.snapshot.data;
    console.log("apiData: ", data.apiData);
  }
}

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

const routeData: Data = route.snapshot.data;

if (routeData.breadcrumb) {
   breadcrumbs.push({
     label: routeData.breadcrumb, 
     url: url 
   });
} else if (routeData.apiData && routeData.apiData.breadcrumb) {
  breadcrumbs.push({
    label: routeData.apiData.breadcrumb,
    url: url
  });
}

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