2017-08-09 4 views
0

私は通常あなたのapp-root(ルートコンポーネント)にツールバー、サイドバーなどを追加してコンテンツを変更するために<router-outlet>を持っていることを知っています。角度:ルートコンポーネントを使用せずにほとんどのページ(ルータ)にサイドバーを追加しますか?

私の問題は次のようにindex.htmlを介して注入された私のルートコンポーネント(アプリ-ルート)であるので、

<body> 
    <app-root></app-root> 
</body> 

私はログイン画面を提供することを望むように、メニューなどをサイドバーを含めることはできません(とその他のこれらの半共有コンポーネントを含むことはできません。だから私のapp-rootには、ログインや他のページ、つまりサイドバー、メニューなどの共有コンテンツを共有してはならない単純な<router-outlet>が含まれています。

私は補助/それらを完全に理解していない。良いシナリオは、ログイン画面がそのまま動作し、ルータコンセントに注入されますが、他のすべてのルートはルータコンセントや共有コンテンツに自分自身を注入する必要があることです。

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav"> 
    An example of content in the side bar 
    </md-sidenav> 

    <div class="example-sidenav-content"> 

    <!-- All other routes should be injected here -->  

    </div> 

</md-sidenav-container> 

私はここで何をすべきですか?

私は間違いなく、すべてのコンポーネントにサイドバー、メニューをコピー/ペーストで配置したくありません。共有コンテンツでなければなりません。

アイデア?私は少し失われています。

おかげ

+0

?これは、私が取り組んでいるアプリケーションでのものです: ' \t ' – Zze

答えて

0

私はあなたによく理解していれば私がお勧めします:

  1. をアプリ-ルートコンポーネントで共有コンテンツを入れて、それを隠すために、隠したりngifクラスを使用activatedRouteに依存します。
  2. ユーザーが共有コンテンツを含まないページから共有コンテンツを含むページにリダイレクトする状態のようなもの(loggedIn user)を使用している場合、アプリケーションを2つのモジュールに分割し、モジュール上の共有コンテンツを持つすべてのページをモジュールすべての共有コンテンツとルータアウトレットを持つモジュールにmini-app-rootコンポーネントを作成します。
    1. すべての共有されたstuffとrouter-outletを含むコンポーネントを作成し、route.moduleにコンポーネントをナビゲートするためにload childrenを使用します。ログインが完了するまで、あなただけの `*サイドバーをngif`していないのはなぜ
関連する問題