angular - Angular2 中的路由和面包屑

Question

我尝试了一些面包屑导航方法，但它们开箱即用似乎毫无用处，因为我的大部分路线都没有包含足够的信息。

例如:

/products
/product:id
/subproudcts:productId
/subproductdetail:subproductId

这些路径中的每一个都是对目录的更深入研究。 SubProduct:500 是 Product:27 等的子项。

我希望面包屑看起来像这样:

My Product A > SubProducts > Sub Product Detail B

默认情况下，上述路径不包含足够的信息，面包屑组件无法神奇地解决这个问题。

我考虑的一个解决方案是像这样延长路线:

/products/detail:id/subproducts
/products/detail:id/subproducts/detail:id

不确定这是否是面包屑组件正在寻找的“正确”方式。

我的问题是:有一个很好的自定义面包屑的好的解决方案可以 1. 显示所有路径，包括指向子列表的链接，以及 2. 显示每个选定父项的名称。

Answer 1

我会通过服务来做

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from "rxjs"

class UrlWithNameAndOtherMeta {
    url: number;
    name: string;
    getUrl() {
        return "<a href=" + this.url + ">" + name + "</a>"
    }
}

class BreadcrumbService {
    breadcrumbEmiter = new BehaviorSubject<UrlWithNameAndOtherMeta[]>([]);
    listOfItems = [];
    push(page: UrlWithNameAndOtherMeta) {
        this.listOfItems.push(page);
        this.breadcrumbEmiter.next(this.listOfItems);
    }
    pop() {
        this.listOfItems.pop();
        this.breadcrumbEmiter.next(this.listOfItems);
     }
    get breadcrumbAsObservable() : Observable<UrlWithNameAndOtherMeta[]>{
        return this.breadcrumbEmiter.asObservable();
    }
}

然后在您的面包屑组件中订阅 breadcrumbAsObservable。之后从页面推送弹出。

附言。但老实说，我不确定我是不是在重新发明轮子 :)