如何使用自定义重用策略创建动态历史菜单

问题描述

实际的概念是我想创建一个历史菜单。当用户从侧边栏项目（已经实现）导航时，组件将照常呈现。因此，会调用 ngOnInit()、ngAfterViewInit() 等。当用户从历史菜单导航时，组件将呈现为重用而无需再次加载。我已经根据用户的导航方式设法做到了这一点。

所以，我有两个问题：

我在订阅、侦听器等方面遇到了一些问题。不再调用每个组件的 ngOnDestroy()。所以，unsubscribe() 不会发生。下次用户从侧边栏导航到组件时，会创建另一个订阅（因为 ngOnInit() 运行）等等。对于 renderer.listen 侦听我在构造函数中使用的点击事件也会发生同样的情况。我应该如何管理任何组件中的订阅以及我在构造函数中使用的 renderer.listen？
为了创建历史菜单，我需要每个组件的 routeName（这不会改变）和 routeTitle（这会根据 id 参数改变 - 供应商id 到供应商标题）。我有一个名为 suppliers（包含所有供应商的网格）和一个名为 cfsupplierFormComponent（供应商）的组件。导航从 suppliers 到 supplierForm，反之亦然。我使用自定义重用策略，并希望将一个名为 httpRequestsupplierData.Title 的组件对象属性动态传递给 routeTitle。

suppliers-routing.module.ts

const routes: Routes = [
  {
    path: '',component: FinBotMainComponent,data: { routeName: "FinBot" }
  },{
    path: 'supplierForm/:id',component: cfsupplierFormComponent,data: { routeName: "supplier",routeTitle: null }
  }
];

cfsupplierFormComponent.component.ts

ngOnInit() {
    this.activatedRoute.url.subscribe((params: Params) => {
        //console.log("params in cfsupplierFormComponent",params);
        this.activatedRoute.snapshot.data.routeTitle = this.httpRequestsupplierData.Title;
        console.log("this.activatedRoute.snapshot.data.routeTitle",this.activatedRoute.snapshot.data.routeTitle);
    });
}

headerBar.component.ts

private createHistoryItemsBasedOnCustomreuseStrategy() {
    let arr: any[] = [];
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            let storedItems: any = this.router.routeReuseStrategy;
            arr.length = 0;
            for (let key in storedItems.storedRoutes) {
                if (storedItems.storedRoutes.hasOwnProperty(key)) {
                    let item = { path: key,value: storedItems.storedRoutes[key],name: storedItems.storedRoutes[key].snapshot.data.routeName + (storedItems.storedRoutes[key].snapshot.data.routeTitle ? ': ' + storedItems.storedRoutes[key].snapshot.data.routeTitle : '') };
                    arr.push(item);
                }
            }
            console.log('arr: ',arr);
        }
    });
}

历史菜单如下所示：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular2-routing