是否可以将动态数据传递到 Angular 路由模块？

Question

我必须将数据传递到路由 (Angular v12.0.1):

// my-module-routing.module.ts
const routes: Routes = [
  { path: '', component: MyComponent, data: { key: '-> THIS HAVE TO BE DYNAMIC <-' } }
]

这个动态数据要通过组件的调用传递，可以在HTML用RouterLink，也可以在TS用navigateWithHistory()，但是要改变的是Route里面的数据。

我不知道这是否可行，如果不行，是否有其他选择？

Answer 1

您可以使用解析器加载动态数据。 Angular documentation 有一个很好的示例展示了如何从服务中获取数据，但您可以 return 任何数据。

然后可以这样获取组件内部的数据：

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    this.data = this.route.snapshot.data;
}

重要的是要注意解析器上的代码将在加载组件之前运行。

Is it possible to pass dynamic data into an Angular routing module?