Question

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

我提供如下路由：

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>

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

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

Answer 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
    });
}

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

N.B：您还可以使用this.route.snapshot.params同步访问它。

已编辑：

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

Answer 2

首先从ActivatedRoute导入@angular/router。

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

访问它的构造函数如下：

constructor(private route: ActivatedRoute){            
}

在ngOnInit中订阅params更改，如下所示：

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

如何在angular2 RC5中获取路径参数

2 个答案: