角材料菜单示意图卡在打开答案

【问题标题】：Angular Materials Menu Schematic Stuck Open角材料菜单示意图卡在打开
【发布时间】：2020-04-26 00:47:48
【问题描述】：

刚刚开始接触 JS/TS/CSS/HTML/Angular6，我正在尝试制作一个相当基本的网络应用程序。我创建了一个角度应用程序并尝试使用预建的导航示意图制作标题。我花了一段时间，但我意识到侧导航菜单不应该只是打开，而应该是可关闭的。

我注意到在 HTML 中可以打开/关闭菜单的位置：

[opened]="(isHandset$ | async) === false">

但是有一个内置的切换按钮，我认为当您将该值设置为 true 时应该保持显示状态。除了在示意图中指示的位置向我的内容添加路由器外，我没有在示意图中进行更改，所以我认为这不会导致问题，而且我对 JS/HTML 很陌生，所以我不确定为什么这不是开箱即用。

HTML (header.component.html)：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === true">
      <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="actions">Action List</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Dnd 5e Reference Site</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <app-homepage></app-homepage>
  </mat-sidenav-content>
</mat-sidenav-container>

TS（header.component.ts）：

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

}

scss 文件（header.component.scss）：

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

菜单关闭时应用的外观图片。注意，我相信左上角或右上角应该有一个菜单按钮，可以在菜单关闭时打开它。

Web app home page when [Opened] = "true"

如果有人能解释原理图的问题所在，那就太好了。此外，如果有人有任何推荐用于 Observables 练习或在 Angular 中使用 ng 标签的资源，我将不胜感激。

谢谢！

【问题讨论】：

标签： html typescript angular-material angular6 observable

【解决方案1】：

所以对于任何偶然发现这个问题的人。我通过删除断点语法解决了它。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport>
      <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="actions">Action List</a>
      <a mat-list-item href="synopsis"> Synopsis</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span><i class="fab fa-fort-awesome-alt fa-3x">Dnd 5e Reference Site</i></span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <div class="jumbotron-fluid">
    <app-homepage></app-homepage>
  </div>
  </mat-sidenav-content>
</mat-sidenav-container>

【讨论】：