如何减少模板上异步管道订阅的数量

Question

我有这个组件StackBliz

模板：

<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>dashboard-app</span>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>

类别：

export class NavigationComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}

我想减少页面上的订阅数量。

我尝试将内容包装到ng-container中，但没有成功。

首先，我在[opened]="isHandset === false"中的模板中有一个错误，其次，ng-container阻止了视图，所以即使我按原样离开[opened]="(isHandset$ | async) === false"，也没有显示

<mat-sidenav-container class="sidenav-container">
<ng-container *ngIf="isHandset$ | async as isHadset">
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="isHadset ? 'dialog' : 'navigation'"
[mode]="isHadset ? 'over' : 'side'"
[opened]="isHadset === false"> //got an error here saying this condition is always false because isHadset is always 'true'
...
*ngIf="isHadset"
...


</mat-sidenav-content>
<ng-container>
</mat-sidenav-container>

有什么想法可以解决我上面描述的所有两个问题吗？

Answer 1

将*ngIf与boolean发射一起使用并不理想，因为如果值为false，则不会渲染元素。然而，我看到最初你的发射是一个物体。由于对象是真实的，您可以忽略到布尔值的映射，并将其直接用于*ngIf。

我还建议将整个容器包装在<ng-container>中以保留DOM。

尝试以下

控制器(*.ts(

import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
...
export class NavigationComponent {
isHandset$: Observable<BreakpointState>;
constructor(private breakpointObserver: BreakpointObserver) {
this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset);
}
}

模板(*.html(

<ng-container *ngIf="(isHandset$ | async) as result">
<mat-sidenav-container class="sidenav-container">
<mat-sidenav 
#drawer 
class="sidenav" 
fixedInViewport 
[attr.role]="(result.matches) ? 'dialog' : 'navigation'"
[mode]="(result.matches) ? 'over' : 'side'" 
[opened]="!result.matches"
>
<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="result.matches"
>
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>dashboard-app</span>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
</ng-container>

我修改了你的Stacklitz