如何在 Angular 中延迟/去抖动对子组件的调用?



有一系列组件在运行自定义方法viewChildRef.show()后会显示出来(我使用的是@ViewChild引用)。

问题在于,在子组件准备就绪之前,状态最初会使用@Select装饰器(angular-redux/store)进行更新 - 订阅中的回调需要在触发ngAfterViewChecked后调用。

将调用子组件延迟到发生特定挂钩的最佳实践是什么?对于那些不知道 angular-redux/store 的人,我有一个 rxjs 订阅可以从@select装饰器中玩。也许延迟/去抖动设置会起作用?

我可以并且已经设置了一个设置为 true 的变量readyForShow,然后在调用ngAfterViewChecked后再次设置为 false。这是一个乏味的解决方案 - 必须有更好的方法,这在角度冗余世界中一定很常见。

我的目标是在其他地方也需要这样做时轻松快速地应用一些东西。

此外,如果 ngrx 中有现成的解决方案,请随时提及 - 这将导致我考虑切换库并可能对其他人有所帮助!

在我看来,几乎每个"真实"页面都会异步获取数据,所以我只是使用异步管道将模板连接到可观察对象,让文字部分显示并在到达时填充异步数据,例如

<span>Last modified: {{ (fileInfo$ | async)?.lastModified }}</span>

请注意构造 - 可观察和管道被括起来,在括号外有解开包装的对象。Elvis/Safe 导航运算符?,当对象为 null 时停止对属性的计算。

如果页面在没有数据的情况下看起来不正确,您可以使用 ngIf 或 ngShow 将其隐藏

<span *ngIf="(lastRefresh$ | async)">Refreshed</span>

此外,对于Redux 存储,默认/初始存储的形状可能很重要,例如,对于一个对象初始化为 {} 而不是 null,对于一个数组初始化为 [] - 下游代码不会太容易崩溃。

最新更新