2016-11-18 7 views
0

routerLinkディレクティブを行列パラメーターで処理しようとしています。今まで私が働くことができた唯一の構文変種は単にパス文字列です。ルータ2のルーター別のシンタックスrouterLinkディレクティブが機能しない

<a routerLink="/state-scratchpad">Syntax 1 - works</a> 
<a routerLink="['/state-scratchpad']">Syntax 2 - doesn't work</a> 
<a routerLink="['/state-scratchpad', { tcomp: '1', tmake: '1-7' }]">Syntax 3 - doesn't work</a> 
<a routerLink="/state-scratchpad;tcomp=1;tmake=8">Syntax 4 - doesn't work</a> 

/state-scratchpad;tcomp=1;tmake=8へのURLバーのナビゲートも機能します。ここで

は私のルートです:

const routes = [ 
    { path: '', pathMatch: 'full', redirectTo: '/welcome' }, 
    { path: 'welcome', component: WelcomeComponent }, 
    { path: 'state-scratchpad', component: StateScratchpadComponent, params: { tcomp: '', tmake: '' } } 
]; 

私は角2.0.0を使用しています。 angular.ioサイトのドキュメントによれば、routerLink値のさまざまな構文がすべて動作するはずです。しかし、最も単純な構文が働くだけです。結果のエラーメッセージは次のとおりです。

S1: Works 
S2: Error: Cannot match any routes: '%5B'/state-scratchpad'%5D' 
S3: Error: Cannot match any routes: '%5B'/state-scratchpad'%2C%20%7B%20tcomp%3A%20'1'%2C%20tmake%3A%20'1-7'%20%7D%5D' 
S4: Error: Cannot match any routes: 'state-scratchpad%3Btcomp%3D1%3Btmake%3D8' 

アイデアはありますか?

+0

のようなのparamsは、それは '[routerLink] =すべきではないアクセスこの

{ path: 'state-scratchpad/:tcomp/:tmake', component: StateScratchpadComponent} 

のようになりますか。 "..."'?おかげさまで – jonrsharpe

答えて

0

は、まずルータのリンクは、ベースURLを渡すとのparamsを追加します。この

<a [routerLink]="['/state-scratchpad', tcomp, tmake]"> 

このように見えます。 次のあなたのルートは、コンポーネントがロードされたとき、あなたはこの

constructor(private route: ActivatedRoute) {} 
ngOnInit(){ 
    this.route.snapshot.params["tcomp"]; 
    this.route.snapshot.params["tmake"]; 
} 
+0

私は単純な初心者のミスをしていました。 paramsが行く限り、私は位置のパラメータではなく行列のパラメータを使用しています。 しかし、私が達成したいのは、routerLinkの値をpath-segment observableに束縛することです。このようなもの: 「Some Link」 しかし、私はこの正しい動作が得られることを知りません。 – CalvinDale

関連する問題