角2ルータリンクの選択

Question

私のページ上の選択要素を使用してナビゲーションを作成したいと考えています。アンカータグでRouterLinkディレクティブを使用するのは簡単ですが、選択ドロップダウンに相当するものはありますか？または、自分の選択に変更があったときに呼び出されるコンポーネントに独自のナビゲーションメソッドを作成する必要がありますか？

私はこのような何かを探しています

<a [routerLink]="[location]">Location</a> 

<select (change)="navigate($event.target.value)"> 
    <option>--Select Option--</option> 
    <option [value]="[location]">Location</option> 
</select> 

：はい、あなたのコンポーネント内のナビゲーションメソッドを作成し、選択制御の(change)イベントにバインドして、内部のナビゲーションを行う必要があり

<select> 
    <option>--Select Option--</option> 
    <option [routerLink]="[location]">Location</option> 
</select> 

Answer 1

その方法は注入されたRouterを使用しています。

RouterLinkディレクティブの角2ルーターsource codeを見ると、シーンの背後にあるrouter.navigateも使用されていることがわかります。

// ** Code below is copied from Angular source code on GitHub. ** 
@HostListener("click") 
    onClick(): boolean { 
    // If no target, or if target is _self, prevent default browser behavior 
    if (!isString(this.target) || this.target == '_self') { 
     this._router.navigate(this._commands, this._routeSegment); 
     return false; 
    } 
    return true; 
    } 

Answer 2

HTMLテンプレート：

<select (change)="navigateTo($event.target.value)"> 
    <option>--Select Option--</option> 
    <option value="location">Location</option> 
</select> 

コンポーネント：

選択あなたは以下を参照できるようRouterLinkディレクティブによって捕獲された clickイベントを持っていないので、それはあなたの select制御のために動作しません。

import {Router} from '@angular/router-deprecated'; //or updated version 

constructor(private router: Router){} 

navigateTo(value) { 
    if (value) { 
     this.router.navigate([value]); 
    } 
    return false; 
}