如何将参数传递到Angular2组件_Angular

如何将参数传递到Angular2组件

angular

如何将参数传递到Angular2组件,angular,Angular,我有一个组件，用于呈现从后端检索的数据。在渲染之前，需要根据参数过滤数据。URL的最后一段是筛选值，如何将其传递到组件中？您可以在组件的构造函数中使用路由参数您可以在组件的构造函数中使用路由参数首先，如果您向我们提供一个代码示例将更容易现在，在app.routes.ts中，您应该有如下内容： { path: 'detail/:id', component: HeroDetailComponent } this.route.params.subscribe(params =

我有一个组件，用于呈现从后端检索的数据。在渲染之前，需要根据参数过滤数据。URL的最后一段是筛选值，如何将其传递到组件中？

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

首先，如果您向我们提供一个代码示例将更容易

现在，在app.routes.ts中，您应该有如下内容：

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

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

在本例中，现在您可以导航到detail/11

详细说明，您需要导入以下组件：

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

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

private route: ActivatedRoute

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

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

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

在本例中，英雄id是一个数字。路由参数始终为字符串。因此，我们使用JavaScript（+）运算符将route参数值转换为一个数字记住这一点。

如前所述，如果您实现ngOnInit（订阅可观察的参数）和Ngondestory（销毁子对象）会更好。首先，如果您为我们提供一个代码示例会更容易