angular - 如何实现 Angular 4 Material 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

以 Angular Material 为例

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

.example-sidenav {
  padding: 20px;
}

Answer 1

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

基本上

I split the sideNav component on my app and header component

这很奇怪但有效

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