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

时间:2017-09-07 21:48:30

标签: javascript angular rxjs ngrx angular-redux

有一系列组件在对它们运行自定义方法viewChildRef.show()后会显示自己(我正在使用@ViewChild引用)。

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

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

我可以并且已经设置了一个设置为true的变量readyForShow,然后在调用ngAfterViewChecked时再次设置为false。这是一个繁琐的解决方案 - 必须有一个更好的方法,这在angular-redux世界中必须是常见的。

我的目标是在我需要在其他地方执行此操作时轻松快速地应用这些内容。

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

1 个答案:

答案 0 :(得分:0)

对我来说,几乎每个'真实'页面都会异步获取数据,因此我只需将模板与异步管道连接到observable,让文字部分显示,异步数据到达时填写,例如

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

注意构造 - 可观察和管道被括起来,在括号外面你有未包装的对象。 Elvis / Safe导航操作符?在对象为空时停止对属性的评估。

如果没有数据页面看起来不正确,您可以使用ngIf或ngShow

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

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