如何在angular2 RC5中获取路由参数答案

【问题标题】：how to get route parameters in angular2 RC5如何在angular2 RC5中获取路由参数
【发布时间】：2018-10-05 07:00:43
【问题描述】：

我已使用 angular-cli@webpack 将我的 angular2 项目升级到 RC5。

我提供如下路由：

const appRoutes: Routes = [
    { path: 'project-manager', component: ProjectManagerComponent },  
    { path: 'designer/:id', component:DesignerComponent } ,
    {path: '',redirectTo: '/project-manager',pathMatch: 'full'} 
];

我正在使用 routerLink 重定向到设计器组件：

<a [routerLink]="['/designer', page._id]"><i class="fa fa-eye fa-fw"></i></a>

现在它已成功重定向，我可以在浏览器的地址栏中看到参数值。

现在我想知道，如何在angular2 RC5的DesignerComponent中访问这个参数。

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案1】：

我相信您需要使用路由器中的 ActivatedRoute 来操作您的参数。

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

...

constructor(private route: ActivatedRoute, ...) {
}

// TODO :: Add type
value: any;  // -> wanted parameter (use your object type)

ngOnInit() {
    // get URL parameters
    this.route.params.subscribe(params => {
      this.value = params.id; // --> Name must match wanted parameter
    });
}

如果您也需要，不要忘记从@angular/core 导入OnInit。

注意：你也可以使用this.route.snapshot.params同步访问。

已编辑：

清理以避免订阅，因为 NG2 路由器自行管理其订阅。
避免使用可能在 HTML 中使用的私有变量以避免破坏 AOT 编译。
已清除 ROUTER_DIRECTIVES，因为它已被弃用。
避免使用字符串文字：params['id'] => params.id
如果有，请使用 TypeScript 输入参数

【讨论】：

把我弄糊涂了。为什么我需要订阅当前活动 url 中的固定值？它不会改变。我有点惊讶没有像 @Input 这样的东西来处理这种事情。
更新：对于那些感兴趣的人：无需从可观察对象获取订阅并在OnDestroy 事件中取消订阅。路线自行管理。你其实可以剪this.sub。
已编辑答案以获取最新信息！

【解决方案2】：

首先从@angular/router 导入ActivatedRoute。

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

如下访问它的构造函数：

constructor(private route: ActivatedRoute){            
}

订阅 ngOnInit 中的参数更改如下：

ngOnInit() {
  this.route.params.subscribe(params => {
    if (params['id']) {
    }
  });
}

【讨论】：