2017-11-28 24 views
0

これは私の私はURLがparent.component.tsに静的な値で作業しているかどうかを確認する関数を書いたapp-routing-module.ts角度 - URLが変更されますがロードされていないビュー

const routes: Routes = [ 
    { 
     path: '', 
     component: LayoutComponent, 
     children: [ 
      { 
       path: 'parent', 
       component: ParentComponent, 
       children: [ 
        { path: ':id/:name', component: ChildComponent } 
       ] 
      } 
     ] 
    }, 
]; 

goToChild() { 
    this.router.navigate(['1/john'], { relativeTo: this.route }); 
} 

そして、私はparent.component.htmlの関数を呼び出します。私はボタンをクリックすると

<button class="btn btn-primary" (click)="goToChild()">Search</button> 

、それはparent.component.htmlに残り、私は

localhost:3000/parent/1/john 

、アドレスバーに正しいURLを取得するしかし、ビューがロードされません。私はAngularをかなり新しくしています。バージョン5を使用しています。

私はこのようなルートを持っていればうまくいきます。

const routes: Routes = [ 
    { 
     path: '', 
     component: LayoutComponent, 
     children: [ 
      { 
       path: 'parent', 
       component: ParentComponent 
      }, 
      { 
       path: 'parent/:id/:name', component: ChildComponent 
      } 
     ] 
    }, 
]; 

私はParentComponentの子配列の下ChildComponentルートを置くことがより適切な感じが、私はそれを行うとき。 URLのみが変更され、ビューは変更されません。

ご協力いただければ幸いです。

答えて

0

現在のparent.component.htmlを共有できますか?テンプレート内に<router-outlet></router-outlet>がありますか?それはあなたが子供のナビゲーションを許可する方法です

+0

これは私の間違いでした、私はparent.component.htmlに 'router-outlet'を追加しませんでした。ありがとうございました:) –

+0

喜んで:) –

関連する問題