angle2アプリのURLから経路パラメータを取得する方法は？

Question

私はこのように設定された一定のルートを持っている：

私がいることは、ユーザーがに行くのであれば、それを作りたい

export const ROUTES: Routes = [ 
    { path: 'custom', component: MyCustomComponent } 
] 

：

http://my-angular-app/#/custom/something?mode=CRAZY 

「MyCustomComponent」の中に、私が見ることができます"mode = CRAZY"にアクセスして、何かをしてください。

MyCustomComponentから変数 "mode"にアクセスするにはどうすればよいですか？あるいは、パラメータを渡すために新しいルートを定義する必要がありますか？

Answer 1

これは、コンポーネント内のクエリパラメータにアクセスするのに役立ちます。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'app-custom', 
    templateUrl: './custom.component.html', 
    styleUrls: ['./custom.component.css'] 
}) 
export class CustomComponent { 

    constructor(private activatedRoute: ActivatedRoute) { 
    let mode = activatedRoute.snapshot.queryParams['mode']; //< HERE 
    console.log(mode); 
    }  
} 

ActivatedRouteをインポートして、コンストラクタ経由で注入する必要があります。次に、注入されたサービスを介してクエリ文字列に入ったものにアクセスできます。このようなルータリンクに

：コンソールログから

<a [routerLink]="['/custom']" [queryParams]="{mode: 'CRAZY'}">Go There!</a>

出力がCRAZYです。

これが役に立ちます。

Answer 2

ActivatedRoute.snapshot.queryParamと同じように、queryParamから取得した値を更新する必要がある場合は、同じルートにいる間にqueryParamが値を変更すると問題が発生します。同じルートにいるので、angleはコンポーネントを再作成しないため、コンストラクタ内のスナップショットから新しい値を取得することはありません。同じルートで更新された値を取得する必要がある場合は、queryParam observableに登録する必要があります。

constructor(
    private route: ActivatedRoute 
) { 
    this.route.queryParams.subscribe((queryParams) => { 
    console.log(queryParams); // get the values of your queryParams 
    }); 
} 

これで、queryParamsの新しい値がすべてコンポーネントで更新されます。 Angular Observableであるため、手動で取り消しを扱うのは面倒ではありません。Angularはあなたのためにそれを処理します。