要实现"Angular 7 - PrimeNg 7 的视图直到窗口调整大小之前都不会渲染"的效果,可以使用ResizeObserver
来监听窗口大小变化,并在合适的时机触发渲染。以下是一个解决方法的代码示例:
ResizeObserver
:import { Component, OnInit, OnDestroy } from '@angular/core';
import { ResizeObserver } from 'resize-observer';
OnInit
和OnDestroy
接口,并定义一个ResizeObserver
对象和一个标志位来表示是否需要渲染:export class YourComponent implements OnInit, OnDestroy {
private resizeObserver: ResizeObserver;
private shouldRender: boolean = false;
ngOnInit() {
this.resizeObserver = new ResizeObserver(() => {
this.shouldRender = true;
this.resizeObserver.unobserve(document.body);
});
this.resizeObserver.observe(document.body);
}
ngOnDestroy() {
this.resizeObserver.disconnect();
}
}
ngIf
来控制视图的渲染:
这样,当窗口大小发生变化时,ResizeObserver
会触发回调函数,并将shouldRender
标志位设为true
,从而达到在窗口调整大小之前不渲染视图的效果。