角4のサブコンポーネントを再初期化する方法

Question

私はアンギュラウェブアプリケーションを構築しており、それぞれのセレクタタグを使ってapp.component.htmlにレンダリングするためのナビゲーションバーとサイドバーコンポーネントがあります。次に、私はそれをレンダリングするために<router-outlet></router-outlet>を使用するログインコンポーネントを持っています。したがって、デフォルトのパスがログインコンポーネントであるアプリケーションを読み込むときに、NavbarとSidebarコンポーネントをログインページ上で初期化しないか、ログインが成功したときに再初期化する必要があります。これは、セッション・ストアに格納されているナビゲーション・バーに名前を表示する必要があるため、ログイン・ページ（セッションがまだ設定されていません）にnullが戻されるためです。私はそれを誰にも表示するためにCSSを使用しようとしましたが、navbarコンポーネントはログインページでまだ初期化しています。私はいくつかの答えを見つけることができるといいですね。

App.Component.html

<!-- Here the current details of the user appears and update can be made--> 
<div class="wrapper"> 
    <div class="sidebar" data-color="green" data-image="assets/img/olam.png"> 
     <!-- 
    Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" 
    Tip 2: you can also add an image using data-image tag 
--> 
     <div class="sidebar-wrapper"> 
      <app-sidebar></app-sidebar> 
     </div> 
    </div> 
    <div class="main-panel"> 
     <nav class="navbar navbar-default navbar-fixed"> 
      <app-navbar></app-navbar> 
     </nav> 
     <div class="content"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-2"></div> 
         <router-outlet></router-outlet> 
        <div class="col-md-2"></div> 
       </div> 
      </div> 
     </div> 
     <app-footer></app-footer> 
    </div> 
</div> 

Answer 1

単純かつごみ溶液を両側とNAVバー上*ngIf="isLoggedIn"を使用することになります。しかし、この1つを使用しないでください、これは邪悪で醜いです。

この問題の適切なアプローチは、ルータのサブルート機能を利用することです。アプリケーション全体に同じテンプレートを使用する代わりに、主要なレベルのルートを使用してログインおよび制限領域を保持します。あなたが必要なものと、ログインページテンプレートを増やす必要があるだろう、

<div class="wrapper"> 
    <router-outlet></router-outlet> 
</div> 

さらに

App.Component.html：たとえば

、あなたのapp.component.htmlだけrouter-outletとても似ていると言います。

LoginPage.Component.html

<div class="main-panel"> 
    <div class="content"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-2"></div> 
        <router-outlet></router-outlet> 
       <div class="col-md-2"></div> 
      </div> 
     </div> 
    </div> 
    <app-footer></app-footer> 
</div> 

必要に応じて、ログインページ用のカスタムバーを追加できることに注意してください。さらに、サブルートセットを使用して、ログイン、登録、およびパスワードを切り替えることができます。

は最後に、あなたはテンプレートです制限作成するまで、次のとおりです。

Restrict.Component.tsこのsubrouteで

<div class="sidebar" data-color="green" data-image="assets/img/olam.png"> 
    <div class="sidebar-wrapper"> 
     <app-sidebar></app-sidebar> 
    </div> 
</div> 

<div class="main-panel"> 

    <nav class="navbar navbar-default navbar-fixed"> 
     <app-navbar></app-navbar> 
    </nav> 

    <div class="content"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-2"></div> 
        <router-outlet></router-outlet> 
       <div class="col-md-2"></div> 
      </div> 
     </div> 
    </div> 

    <app-footer></app-footer> 
</div> 

、<router-outlet></router-outlet>は、制限エリアのサブページの谷切り替えます。たとえば、ダッシュボード、ユーザー、料金、勘定などです。

ルートツリー：

+-/
    | 
    +- /login 
    | | 
    | +- /sign-in 
    | | 
    | +- /sign-up 
    | | 
    | +- /recover-password 
    | 
    +- /restrict 
     | 
     +- /dashboard 
     | 
     +- /users 
     | 
     +- /fees 
     | 
     +- /accounts