角度4の素材Sidenavコンポーネントはどのように実装できますか？

Question

sidenavコンポーネント、それが働いているが、それは全体のウェブサイトを取っていない、あなたはhere

に、これは私のアプリのコンポーネント

あるモバイルデバイス 上でそれを表示するためにだアイデアをより良いアイデアを持っているこのビデオを見ることができますapp.component

<wh-header></wh-header> 

<div class="container"> 
    <router-outlet></router-outlet> 
    <wh-footer></wh-footer> 
</div> 

が、私が表示したいコンテンツは、ヘッダー・コンポーネントである場合にどのように私は正常に動作するコンポーネントを設定することができますか？

これはウェブサイトangular materialのウェブサイトからコピーしたコードです。

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav"> 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <button type="button" md-button (click)="sidenav.open()"> 
     Open sidenav 
    </button> 
    </div> 

</md-sidenav-container> 

header.component.html

私は、ヘッダ成分角度材料の例から取っ

<md-sidenav-container class="example-container"> 
<header class="header flex flex-content-between"> 
    <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']"> 
    <img src="assets/nav/logo.png" class="nav-logo" alt="Logo"> 
    </a> 

    <!-- user is not logged in --> 
    <div *ngIf="!authservice.isAuthenticated() else user_is_loggedIn"> 
    </div> 

    <!-- user is already logged in --> 
    <ng-template #user_is_loggedIn> 

    <md-sidenav #sidenav class="example-sidenav"> 
    <ul> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    </ul> 
    </md-sidenav> 
    <div class="example-sidenav-content"> 
    <button type="button" md-button (click)="sidenav.open()"> 
     Open sidenav 
    </button> 
    </div> 
    </ng-template> 

</header> 
</md-sidenav-container> 

header.component.css

に実装しよう

.example-sidenav-content { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
} 

.example-sidenav { 
    padding: 20px; 
} 

Answer 1

これは私がこの問題を解決した方法です。私は私のアプリとヘッダコンポーネントにsideNavコンポーネントを分割する良い方法は基本的

がある場合、それは大丈夫ちょうど私を修正していた場合に知ってはいけない奇妙ですが、

を作品

app.component.html

私はで私のアプリを包ん私は私のラップするように残りのコード<md-sidenav>ボタン

<header class="header flex flex-content-between"> 
    <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']"> 
    <img src="assets/nav/logo.png" class="nav-logo" alt="Logo"> 
    </a> 

    <!-- user is not logged in --> 
    <div *ngIf="!authservice.isAuthenticated() else user_is_loggedIn"> 
    </div> 

    <!-- user is already logged in --> 
    <ng-template #user_is_loggedIn> 

    <md-sidenav #sidenav class="example-sidenav"> 
    <ul> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    <li><a href="">about</a></li> 
    </ul> 
    </md-sidenav> 
    <div class="example-sidenav-content"> 
    <button type="button" md-button (click)="sidenav.toggle()"> 
     Open sidenav 
    </button> 
    </div> 
    </ng-template> 

</header> 

を持ったSideNav成分私のヘッダにおいて

<md-sidenav-container> 
    <wh-header></wh-header> 
    <div class="container"> 
     <router-outlet></router-outlet> 
     <wh-footer></wh-footer> 
    </div> 
</md-sidenav-container> 

header.component.html

からアプリを<md-sidenav-container>とすると、ウェブサイト全体にアニメーションとメニューが表示されます

これは私ですsolution