如何将参数传递给Angular2组件答案

【问题标题】：how to pass parameters into Angular2 components如何将参数传递给Angular2组件
【发布时间】：2016-02-24 21:34:39
【问题描述】：

我有一个组件可以呈现从后端检索到的数据。在渲染数据之前，需要根据参数进行过滤。 URL的最后一段是过滤值，如何向下传递给组件？

【问题讨论】：

【解决方案1】：

首先，如果你提供给我们一个代码示例会更容易。

现在，在你的 app.routes.ts 中你应该有这样的东西：

{
  path: 'detail/:id',
  component: HeroDetailComponent
}

在这种情况下，现在您可以导航到 detail/11。

详细组件你需要导入这个：

import { ActivatedRoute } from '@angular/router';

并将其作为私有添加到构造函数中：

private route: ActivatedRoute

然后你可以像这样获取id参数：

this.route.params.subscribe(params => {
  let id = +params['id'];
  this.heroService.getHero(id)
    .then(hero => this.hero = hero);
});

在这种情况下，英雄 id 是一个数字。路由参数始终是字符串。因此，我们使用 JavaScript (+) 运算符将路由参数值转换为数字。 记住这一点。

如here 所述，最好实现ngOnInit（订阅可观察的参数）和ngOnDestroy（销毁子）

【讨论】：

【解决方案2】：

您可以在组件的构造函数中使用路由参数

constructor(routeParams: RouteParams) {
  this.filter = routeParams.get('custom_filter');
}

【讨论】：