如何实现 angular 4 材质 Sidenav 组件？答案

【问题标题】：How can I implement the angular 4 material Sidenav component?如何实现 angular 4 材质 Sidenav 组件？
【发布时间】：2017-07-20 15:57:24
【问题描述】：

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

【问题讨论】：

也显示css
一种方法是 - <md-sidenav-layout fullscreen>

标签： angular angular-material2

【解决方案1】：

这就是我解决这个问题的方法。不知道行不行如果有更好的方法请指正

基本上

我在我的应用程序和标题组件上拆分了 sideNav 组件

这很奇怪，但有效

app.component.html

我使用 SideNav 组件中的 <md-sidenav-container> 包装了我的应用程序

<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

【讨论】：