角度材料菜单原理图卡住打开

Question

只是在JS/TS/CSS/HTML/Angular6中弄湿了我的脚，我正在尝试制作一个相当基本的Web应用程序。我创建了一个角度应用程序，并尝试使用预构建的导航原理图制作标题。我花了一段时间，但我意识到侧导航菜单不应该只是打开，而且应该是可关闭的。

我注意到在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;
}

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

[打开] = "true" 时的 Web 应用主页

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

谢谢！

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