Question

我需要路由到我的组件并在@Input中绑定数据。
我有一个路由器链接，并且在不同的地方使用它来导航到我的组件。当我从不同地方路由到组件时，我需要传递不同的数据

我正在尝试这个

this._router.navigate(['MyComponent', {title: 'something' }]);

我不想使用这种方式，因为它将为我的URL链接添加一些参数
我希望它像
< myComponent [data]='data'> 然后在@Input
中捕获它 @Input() data = data; // sorry if this code is wrong, it's just for example

有什么办法可以做到这一点？还是有其他选择可以解决我的情况？我如何路由到组件并随身携带一些数据

Answer 1

您无法将@Input参数添加到路由组件。您可以添加静态数据：

{
   path: 'heroes',
   component: HeroListComponent,
   data: { title: 'Heroes List' 
 }

文档注释：

第三条路线中的data属性是用于存储与此特定路线关联的任意数据的位置。在每个已激活的路由中都可以访问data属性。使用它来存储诸如页面标题，面包屑文本和其他只读静态数据之类的项目。您将在本指南的后面部分中使用解析防护来检索动态数据。

您可以在解析器中传递数据（例如，从服务器获取数据）：

{
  path: 'heroes',
  component: HeroListComponent,
  resolve: { hero: HeroResolver }
}

文档注释：

总而言之，您希望延迟呈现路由的组件，直到获取所有必需的数据为止。

有关解析器的更多信息：https://angular.io/guide/router#resolve-guard

或者您可以通过服务在组件中获取变量。

Answer 2

使用ng-interconnect

在用例中，您要做的就是在路由外部创建一个广播器，并从路由内部接收数据。

this.dataForRoute = interconenct.createBroadcaster(‘dataSender’);
...
this.dataForRoute.emit(data);

在路线后面的组件中-

interconnect.receiveFrom('dataSender', '', (data) => {
   //Here is your data
   console.log(data)
})

更多详情： https://charlie-code.medium.com/simplify-your-angular-development-using-ng-interconnect-1b94c68e9141

一种采用角度路由的数据绑定方法

2 个答案: