2016-11-20 4 views
2

私はそうcomponentTwoの内側に、私は次のことを持っている子ルートchildTwoに移動したい場合はルートと子のルートは今、次のような構造角度2コンポーネントパスではなく完全なパスを使用してルータの移動

export const routes: Routes = [ 
    { path: '', redirectTo: 'component-one', pathMatch: 'full' }, 
    { path: 'component-one', component: ComponentOne }, 
    { path: 'component-two/:id', component: ComponentTwo, 
    children: [ 
     { path: '', redirectTo: 'child-one', pathMatch: 'full' }, 
     { path: 'child-one', component: ChildOne }, 
     { path: 'child-two', component: ChildTwo } 
    ] 
    } 
]; 

を使用しています。

<a [routerLink]="['child-two']"> 

これは機能します。

しかし、ボタンの代わりにリンクを使用する場合はどうすればよいですか。

<button (click)="toClicked()">Two</button> 

を次のようにだから私は、私は私がちょうどする必要がリンクを持っている場合は、あなたが見ることができるようにそれから私は、次のクリックハンドラ

toClicked(){ 
    this.router.navigate(['component-two','child-two']); 
} 

を持って、ボタンを使用して別の方法を試してみました子ルートchildTwoを提供しますが、クリックハンドラのボタンを使用して、親コンポーネントcomponent-twoと子コンポーネントを提供する必要があります。childTwo

クリックハンドラを使用して子コンポーネントを渡すだけでナビゲートできますか?

答えて

2

あなたはこのようにそれを行うことができます。

constructor(private route: ActivatedRoute, private router: Router) { } 

toClicked(){ 
    this.router.navigate(['./child-two'], {relativeTo: this.route}); 
} 

は、より多くの詳細については、relative routes chapter in the docsを見てみましょう。

関連する問題