Question

我正在创建应用程序历史记录功能，需要从每个组件初始化时从http调用中获取的每个组件中获取一个变量。

目前我只是订阅我的AppComponent内部的router.events，如此

export class AppComponent {
    constructor(private router: Router, private historyService: HistoryService) {
        this.router.events
            .filter(e => e instanceof NavigationEnd)
            .subscribe((routerEvent) => {
                console.log('Storing History Entry: ', routerEvent);
                this.historyService.saveEntry(routerEvent);
            });
    }
}

我是否有办法从此下的每个组件中获取变量并将其传递给历史服务，以便历史记录可以包含此变量？

Answer 1

如果它是固定值，您可以使用路由配置上的data属性为每条路径提供一些数据。

{
    path: 'products',
    data: { someBitofInfo: 'info'},
    component: 'ProductComponent'
},

data属性是只读的，因此您只能将其用于固定值。但是您可以为每个路径定义不同的固定值。

OR

如果这不是一个选项（数据不固定），那么您可以将该名称作为可选或查询参数添加到URL ...其缺点是它将显示在地址栏中。但是，如果你不关心你的地址栏网址是什么样的，那么它就是你的选择。

Answer 2

您可以在组件中使用共享服务并使用该服务属性：

myVar:any;
getMyVar(){
 return this.MyVar;
}
setMyVar(value){
 this.myVar=value;
}

甚至直接从historyService调用getMyVar。

共享服务

this.sharedService.setMyVar(value)

<强>部件

Grid.IsSharedSizeScope

另一种解决方案是使用本地存储，但如果用户禁用了本地存储，则存在约束

从我导航到router.events.subscribe内部的组件中获取变量

2 个答案: