固定汉堡图标角度

Question

我使用ng generate @angular/material:material-nav --name header生成了一个标头组件，在这种情况下，即使屏幕尺寸更大，我也需要修复汉堡包图标。 现在，它仅在屏幕尺寸较小时才出现。 我需要一些帮助来解决这个问题。 堆栈闪电战中的代码 (https://angular-bfjx3s.stackblitz.io/) 谢谢

需要这样的东西(https://console.cloud.google.com)

Answer 1

您需要像这样更改汉堡包按钮的 *ngIf 条件(或者如果您希望按钮始终可见，您甚至可以删除 *ngIf：

<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>web-doctor</span>
</mat-toolbar>

这里的代码：https://stackblitz.com/edit/angular-kutmnh

Answer 2

您可以从按钮中删除条件语句*ngIf="isHandset$ | async"

Answer 3

从header.component的以下代码中删除*ngIf条件.html

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

Answer 4

谢谢大家的尝试， 我发现这里提到的是不同的断点(角度垫边导航属性是手机$ | 异步解释) 所以我将当前设置更改为在 HTML 文件和 TS 文件中((isWeb$ | async) || (isTablet$ | async) || (isHandSet$ | async))，如下所示

isWeb$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Web)
.pipe(
map(result => result.matches)
);
isTablet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Tablet)
.pipe(
map(result => result.matches)
);
isHandSet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);