如何實現角度4材料Sidenav組件？

的sidenav組件它的工作，但它沒有考慮整個網站，你可以看到這部影片有一個更好的主意here 如何實現角度4材料Sidenav組件？

它來顯示它在移動設備的想法，這是我的應用程序組件

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; 
}

來源

2017-07-20 marco gomes

也顯示了css – Hareesh

一種方法是 - ' – Dylan

這就是我解決這個問題的方法。不知道這是正常的只是糾正我，如果有更好的辦法

基本上

我在我的應用程序和頭組件拆分sideNav組件

這是奇怪的，但工程

app.component.html

我包我的應用程序<md-sidenav-container>從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>和按鈕

<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>

我不得不包裹的其餘部分我應用程序<md-sidenav-container>在整個網站上有動畫和菜單

這是我的solution

來源

2017-07-21 11:45:42

如何實現角度4材料Sidenav組件？

回答

相關問題