2017-03-17 20 views
1

私はメニューと二次メニューコンポーネントを持っています。私は、router-outletタグに表示されたコンポーネントIに基づいてセカンダリメニューの項目を変更したいと思います。
メニューのナビゲーションには複数のレベル(クラシックツリー)がありますが、セカンダリメニューでは最後のレベルのみを表示します。Angular2 - 親のメニューを変更ルータ出口の子からのコンポーネント

どのようにですか?私は既にcomponent-communication cookbookを読んでいます。私は、問題を親と子供がサービスを通じて伝達することで解決できると思います。

しかし、これがこの問題の最善のアプローチであるかどうか、私は自分自身に尋ね続けますか?

const routes: Routes = [ 
    { path: "", component: HomePage }, 
    { 
     path: "team-support", component: TeamSupportPage,  //secondary menu + router-outlet 
     children: [ 
      { path: '', component: TeamSupportHomePage }, 
      { path: 'add', component: TeamSupportTaskAddPage }, 
      { 
       path: 'project/:id', 
       component: TeamSupportProjectPage,    //this component should change secondary menu for TeamSupportPage component 
       children: [ 
        { path: '', component: TeamSupportProjectDashboardPage }, 
        { path: 'jobs', component: TeamSupportProjectJobsPage } 
       ] 
      }, 
     ] 
    } 
]; 

編集: 私はあなたが奥に移動することができるオンラインショップを持って同じ機能を実現したいのですが、二次リンクの変更:
ルート・ページ上にある場合、リンクはコンピュータ、庭あり、ツール、...
あなたがコンピュータをクリックし、への変更リンク:あなたがモニターをクリックすると、モニタ、ディスク、...
を、に変更をリンクします、フラット、LED、OLED ...

変更は、条件付きであります:下位ページにリンクがない場合、古い 使用されています。手動ですべてのページに追加することができましたが、すべてのページに追加しないようにしたいと考えています。

+0

どちらがセカンダリですか? –

+0

TeamSupportProjectDashboardPageが読み込まれたら、TeamSupportPageで定義されたメニュー(テンプレート)を変更したいと思います。 – Makla

+0

TeamSupportProjectDashboardPageのコードを投稿 –

答えて

1

親子のイベント通信を見てください[1]。子が読み込まれるか、またはすぐ後で、子はメニューのイベントを発行します。イベント自体にメニュー項目が含まれます。親はイベントを聞きます。トリガされると、親はメニューを適切に更新します。

このイベントでは、機能行に沿って責任を解除することができます。親は一般レンダリングを担当します。自身のデータへの論理リンクを作成する責任を負う子。

1 - https://angular.io/guide/component-interaction#parent-listens-for-child-event

関連する問題