skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

avoid multiple async calls (#13301)

Browse Source
This commit is contained in:
Amit Portnoy
2018-10-03 01:30:35 +03:00
committed by vivian-hu
parent 913d08e0f2
commit 381c03725c
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html
+4 -4
View File
@@ -3,9 +3,9 @@
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="isHandset ? 'over' : 'side'"
[opened]="!isHandset">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
@@ -20,7 +20,7 @@
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
*ngIf="isHandset">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span><%= project %></span>
src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts
+21 -9
View File
@@ -1,7 +1,7 @@
import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
import { Component, OnDestroy<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -16,13 +16,25 @@ import { map } from 'rxjs/operators';
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %>Component {
export class <%= classify(name) %>Component implements OnDestroy {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
isHandset: boolean;
constructor(private breakpointObserver: BreakpointObserver) {}
/** Emits when the component is destroyed. */
private readonly _destroyed = new Subject<void>();
constructor(breakpointObserver: BreakpointObserver) {
breakpointObserver.observe(Breakpoints.Handset)
.pipe(
takeUntil(this._destroyed)
).subscribe(result => {
this.isHandset = result.matches;
});
}
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
}
}