修复了汉堡包图标 angular
Fixed hamburger icon angular
我使用 ng generate @angular/material:material-nav --name header
生成了一个 header 组件,即使屏幕尺寸更大,我也需要修复汉堡包图标。
现在它仅在屏幕尺寸较小时出现。
我需要一些帮助来解决这个问题。
stackblitz 中的代码 (https://angular-bfjx3s.stackblitz.io/)
谢谢
需要这样的东西 (https://console.cloud.google.com)
从 header.component.html
中的以下代码中删除 *ngIf
条件
<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>
您可以从按钮
中删除条件语句*ngIf="isHandset$ | async"
您需要像这样更改汉堡包按钮的 *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>
谢谢大家的尝试,
我发现这里提到的是不同的断点 ()
因此,我将 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)
);
我使用 ng generate @angular/material:material-nav --name header
生成了一个 header 组件,即使屏幕尺寸更大,我也需要修复汉堡包图标。
现在它仅在屏幕尺寸较小时出现。
我需要一些帮助来解决这个问题。
stackblitz 中的代码 (https://angular-bfjx3s.stackblitz.io/)
谢谢
需要这样的东西 (https://console.cloud.google.com)
从 header.component.html
中的以下代码中删除*ngIf
条件
<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>
您可以从按钮
中删除条件语句*ngIf="isHandset$ | async"
您需要像这样更改汉堡包按钮的 *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>
谢谢大家的尝试,
我发现这里提到的是不同的断点 (((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)
);