我正在观看有关如何使用工具栏设置 Angular Material Sidenav 的视频 ( https://www.youtube.com/watch?v=Q6qhzG7mObU) 教程,但它似乎只有在我调整页面大小时才会生效。我不知道这是我这边的小故障,还是我遗漏了一些小问题。
Doesn't show the menu icon on page load (even if page starts on mobile size)
Shows menu icon as soon as page resizes to a mobile size
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, share } from 'rxjs/operators';
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
share()
);
constructor(private breakpointObserver: BreakpointObserver) {}
<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) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</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>ProjectVAS</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
.sidenav-container {
justify-content: space-between;
height: 100%;
}
.sidenav {
width: 150px;
}
它必须只显示菜单按钮(或页面加载的一侧,而不管)
最佳答案
教程的问题有时在于它们会告诉您该做什么,但不会告诉您您正在做什么。由于显然您是 Angular Material 的新手,您应该花一些时间阅读文档并理解您正在使用的代码:https://material.angular.io/components/sidenav/overview .
mode
属性控制 sidenav 的外观。 opened
属性控制它是否打开/显示。您已将这两个属性“绑定(bind)”到断点观察器,以便它们的值根据(在本例中)设备是否为手机而变化。因此 - 如果您更改屏幕尺寸,菜单的行为可能会发生变化。
通过静态设置属性来修复它:
mode="side"
opened="true"
或者您喜欢的任何行为。
关于html - Angular Material Nav Sidebar 仅在响应式调整大小时显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57885511/