2016-07-19 8 views
2

Angular 2 Routerは頻繁に更新されていたので、このトピックの古い質問はもう有効ではありません。私は、この問題に対する解決策を探していると私は1つを見つけるためにまだ持っている...子コンポーネントから親のルータ出口を角度2でターゲティングしていますか?

だから、私の問題は、子コンポーネントから親のコンポーネントルーター-コンセントを目標としています。

たとえば、私たちはこの1つ(我々のアプリのルート)のようなAppComponentを持っている:

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {HeaderComponent} from './header.component'; 
import {LibraryComponent} from './library.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <header></header> 
    <library></library> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES,HeaderComponent,LibraryComponent], 
    providers: [] 
}) 
export class AppComponent { 

} 

そしてHeaderComponentは次のようになります。

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
selector:'header', 
template:'<a routerLink="test" routerLinkActive="active">go to TEST</a>', 
    directives:[ROUTER_DIRECTIVES] 
}) 
export class HeaderComponent{} 

私app.routesのルックスの要部このように:

const routes: RouterConfig = [ 
{ 
    path: 'test', 
    component: TestComponent 
} 
]; 

正確に私はここで間違っていますか? "test"へのリンクをクリックすると、ルータコンセントが空のままである間に、新しい "test" divが作成されます(これはTestComponentのセレクタのためです)。

もう1つ質問ROUTER_DIRECTIVESをインポートして、それを親コンポーネントで既に行っている場合は、子コンポーネントHeaderComponentのディレクティブにも供給する必要があるのはなぜですか?

答えて

2

以下のようにルータのリンクを更新できますか?

'<a [routerLink]="['../test']" routerLinkActive="active">go to TEST</a>' 

テストがルートである場合は、絶対ナビゲーション を行うことができますが、[] 『「で使用された場合

RouterLinkが値としてコマンドの配列を受け入れテストするに行きます』。

あなたはまた、ディレクティブで、コンポーネントで使用されるすべてのディレクティブはディレクティブのプロパティ内のコンポーネントのメタデータで提供してい

routerLink「をTESTに行く」 ようになり、ルートを変更することができます。 ROUTER_DIRECTIVE@angular/routerパッケージの定数であり、関連するディレクティブの配列を提供し、routerLinkはそれらの1つです。したがって、その配列にrouterLinkディレクティブを追加することでそれを使用します。あなたは(ルータパッケージにインポートされているかどうかわからない)その配列のrouterLinkだけを渡すことができます。詳細について

official docs

+2

親を参照 '' [routerLink] = "[ '../試験']" 実際です。親がルートの場合、 '[routerLink] =" ['/ test'] "'を使用することもできます。それ以外の場合は '' [']' 'を '']に追加する必要があります。そうでなければ '' ['/test '] ''は配列として解釈されず、 '[]'で動作しない文字列として解釈されます。 'routerLink = '/ test" ' –

+0

@GünterZöchbauerこれをより良い答えにしてくれてありがとう。最近のアップグレードでこれが変更されたのですか、それとも私はdocでそれを逃しました。特に現在のルートと文字列属性からの相対ナビゲーションサポート 'routerLink ="/test "' –

+0

これらのパスプレフィックスはすべてのルータでサポートされていました(私は後期アルファからAngular2を使用しています)。実際に私は文字列を直近で直接渡すことについてしか知りませんでした。これが以前にサポートされたかどうかはわかりません。 –

関連する問題