web-dev-qa-db-ja.com

angular2 RC5でルートパラメータを取得する方法

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>

これで、リダイレクトが正常に完了し、ブラウザのアドレスバーにパラメータ値が表示されます。

次に、angle2 RC5のDesignerComponentでこのパラメーターにアクセスするにはどうすればよいかを知りたいと思います。

angulartypescriptangular2-routing
10
Bhushan Gadekar

パラメーターを操作するには、ルーターから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をインポートすることを忘れないでください。

N.B：this.route.snapshot.paramsを使用して同期的にアクセスすることもできます。

編集済み：

  • NG2ルーターが自分でサブスクリプションを管理するため、サブスクリプションを回避するためのクリーンアップ。
  • AOTコンパイルを壊さないように、HTMLで使用される可能性のあるプライベート変数を使用しないでください。
  • 廃止されたため、ROUTER_DIRECTIVESを削除しました。
  • 文字列リテラルの使用は避けてください：params ['id'] => params.id
  • TypeScriptを使用してパラメーターを入力します
15
Alex Beugnet

最初に@angular/routerからActivatedRouteをインポートします。

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

以下のようにコンストラクタにアクセスします。

constructor(private route: ActivatedRoute){            
}

以下のようにngOnInit内のparams変更をサブスクライブします。

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