时间戳

首页 > 解决方案 > 使用角度路由的一种方式数据绑定

angular - 使用角度路由的一种方式数据绑定

问题描述

我需要路由到我的组件并在@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

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

标签： angulartypescript

解决方案

您不能将@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

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

推荐阅读