我正在开发一个使用 Material UI 的 Angular 应用程序,我使用 Angular CLI 生成以下代码:
Navigation 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) === false">
<mat-toolbar>
<mat-icon>keyboard_arrow_down</mat-icon> Select
</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink]="['home']">
<mat-icon>location_on</mat-icon> - Home
</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>
</mat-toolbar>
<!-- Add Content Here -->
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Navigation TypeScript
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-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
我的问题是,我希望当用户单击链接时导航栏关闭(消失)。
我怎么做?当用户单击链接时,导航栏保持启用状态。我必须点击背景的某个地方才能让它消失。
您已经有模板参考#drawer
sidenav 组件的所以你可以像这样调用切换方法
<mat-nav-list (click)="drawer.toggle()">
<a mat-list-item [routerLink]="['home']">
<mat-icon>location_on</mat-icon> - Home
</a>
</mat-nav-list>
如果我们想切换小屏幕(移动设备)的侧边栏底座
成分
toggle(nav: MatSidenav) {
const isSmallScreen = this.breakpointObserver.isMatched(
"(max-width: 599px)"
);
if (isSmallScreen) {
nav.toggle();
}
}
模板
<mat-nav-list (click)="toggle(drawer)">
<a mat-list-item [routerLink]="['home']">
<mat-icon>location_on</mat-icon> - Home
</a>
</mat-nav-list>
demo ???? https://stackblitz.com/edit/angular-kyyadi
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)