親の動的な子コンポーネント

Question

Angular4とVmwareのClarity UI for Angularを使ってアプリケーションを構築しています。私はアプリをナビゲートするためのメインヘッダーがあります。 サイドバーなどを必要としないアプリ内にはいくつかのビューがあります。 特定のビューに固有のサイドバーを表示するには、そのビューにユーザーがナビゲートしたときにそのサイドバーが表示されるようにしたいとします。 私のアプリケーションでモジュールレベルのルーティングも使用しています。

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { MainComponent } from './main.component'; 

const routes: Routes = [ 
    { 
     path: '', component: MainComponent, 
     children: [ 
      { 
       path: 'dashboard', 
       loadChildren: './dashboard/dashboard.module#DashboardModule', 
       data: { 
        title: 'Dashboard', 
        showSideNav: false 
       } 
      }, 
      { 
       path: 'sales', 
       loadChildren: './sales/sales.module#SalesModule', 
       data: { 
        title: 'Sales', 
        showSideNav: true 
       } 
      } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class MainRoutingModule { } 

これはMainComponent

import { Component, OnInit } from '@angular/core'; 
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'app-main', 
    templateUrl: './main.component.html', 
    styleUrls: ['./main.component.scss'] 
}) 
export class MainComponent implements OnInit { 

    showSideNav: Boolean = false; 

    constructor(public router: Router, public activatedRoute: ActivatedRoute) { } 

    setSidenavState() { 
     this.router.events 
      .filter(event => event instanceof NavigationEnd) 
      .map(() => this.activatedRoute) 
      .map(route => { 
       while (route.firstChild) { 
        route = route.firstChild; 
       } 

       return route; 
      }) 
      .filter(route => route.outlet === 'primary') 
      .mergeMap(route => route.data) 
      .subscribe((event) => { 
       this.showSideNav = event['showSideNav']; 
       console.log(this.showSideNav); 
      }); 
    } 
    ngOnInit() { 
     this.setSidenavState(); 
     if (this.router.url === '/') { 
      this.router.navigate(['/dashboard']); 
     } 
    } 

} 

であり、これはメインコンポーネント内のメインテンプレート

<clr-main-container> 
    <header class="header header-6"> 
     <div class="branding"> 
      <a routerLink="/dashboard" class="brand nav-link"> 
       <img src="assets/img/logo-white.png"> 
      </a> 
     </div> 
     <div class="header-nav"> 
      <a routerLink="/dashboard" routerLinkActive="active" class="nav-link nav-text">Dashboard</a> 
      <a routerLink="/sales" routerLinkActive="active" class="nav-link nav-text">Sales</a> 
      <a href="" class="nav-link nav-text">Purchases</a> 
      <a href="" class="nav-link nav-text">Contacts</a> 
      <a href="" class="nav-link nav-text">Reports</a> 
     </div> 
    </header> 
    <div class="content-container"> 
     <div class="content-area"> 
      <router-outlet></router-outlet> 
     </div> 
     <nav class="sidenav" *ngIf="showSideNav"> 
      <app-sidenav></app-sidenav> 
     </nav> 
    </div> 
</clr-main-container> 

である私の質問がある

+-- dashboard 
+-- sales 
| +-- sidenav 
+-- sidenav 
| +-- sidenav.component.html 
| +-- sidenav.component.ts 
+-- main-routing.module.ts 
+-- main.component.html 
+-- main.component.ts 
+-- main.module.ts 

このように、私はセットアップを持っています差分を挿入するにはどうすればいいですか？ showSideNavプロパティが trueに設定されている場合は、特定のビューに固有のコンポーネントを app-sidenavコンポーネントに追加します。 提案やリンクがあれば幸いです。

Answer 1

私はあなたのユースケースを解決する最も簡単な方法は、実際にルーティングされたコンポーネントに少しレイアウトを移動することだと考えています。

<div class="content-container"> 
    <div class="content-area"> 
     <router-outlet></router-outlet> 
    </div> 
    <nav class="sidenav" *ngIf="showSideNav"> 
     <app-sidenav></app-sidenav> 
    </nav> 
</div> 

をとのあなたの販売のテンプレートは次のようになりましょう： 今、あなたはあなたのメインのテンプレートでこれを持って、にルーティングされたコンポーネントをsidenav をダウンシフトすることにより

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

メインテンプレートには、次のようになります。

<div class="content-container"> 
    <router-outlet></router-outlet> 
</div> 

とあなたの販売のテンプレートは次のようになります。

<div class="content-area"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<nav class="sidenav"> 
    <sales-sidenav></sales-sidenav> 
</nav> 

コンポーネントにsidenavがない場合は、単純にsidenavをそのテンプレートに入れないでください。 *ngIfの必要はありません。 その結果、あなたはsidenav情報で経路を汚染しなくなりました。経路自体を処理するコンポーネントに残しておけば、特定のsidenavロジックを所有する必要があります。