如何在angular2 RC5中獲取路徑參數

Question

我使用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>

現在它被重定向成功，我能夠在瀏覽器的地址欄中看到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
    });
}

如果您需要，也不要忘記從@angular/core導入OnInit 。

注意：您也可以使用this.route.snapshot.params同步訪問它。

---

編輯：

• 清理以避免訂閱，因為NG2路由器自己管理他的訂閱。
• 避免使用可能在HTML中使用的私有變量來避免破壞AOT編譯。
• 清理了ROUTER_DIRECTIVES因為它已被棄用。
• 避免使用字符串文字：params ['id'] => params.id
• 如果您有參數，請使用TypeScript鍵入您的參數

Answer 2

首先從@angular/router導入ActivatedRoute 。

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

訪問它的構造函數如下：

constructor(private route: ActivatedRoute){            
}

在ngOnInit中訂閱params更改如下：

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