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

我使用来自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

如何实现角度4材质Sidenav组件？

1 个答案: