监听窗口调整大小事件的组件
假设我们有一个隐藏在某个窗口宽度的组件。
import { Component } from '@angular/core';
@Component({
...
template: `
<div>
<p [hidden]="!visible" (window:resize)="onResize($event)" >Now you see me...</p>
<p>now you dont!</p>
</div>
`
...
})
export class MyComponent {
visible: boolean = false;
breakpoint: number = 768;
constructor() {
}
onResize(event) {
const w = event.target.innerWidth;
if (w >= this.breakpoint) {
this.visible = true;
} else {
// whenever the window is less than 768, hide this component.
this.visible = false;
}
}
}
当 visible
为假时,我们模板中的 p
标签将隐藏。每当调用 onResize
事件处理程序时,visible
都会改变值。每次 window:resize
发生事件时都会发出呼叫。