Angular计时器替代品还是最好的方法

时间:2019-10-10 08:03:44

标签: angular typescript

目前我正在为项目使用Angular 8,并且我有一个带有复选框的组件,该复选框将决定页脚是否可见。

因为页脚是设置组件的独立组件,所以我目前需要在setTimeout上将页脚每5秒检查一次本地变量。

setTimeout(function(){ checklocalStorage() }, 5000);

只有1个计时器可以使用,但是当我添加更多计时器时,这样做似乎不是一种干净的方法?

是否还有其他方法可以使组件更新,而不必让计时器一直循环运行以检查localstorage变量中是否有任何更改,或者这是推荐的方法?

1 个答案:

答案 0 :(得分:2)

组件通信是Angular的核心部分-如何实现它在很大程度上取决于您和/或您的团队。在这种情况下,setTimeout是不合适的。不仅因为它只会被调用一次(setInterval以重复的间隔调用),而且还因为它效率不高。

这意味着,如果选中了复选框,则仍有可能等待近5秒钟,以获取对页脚暴露或闭合结果的反馈。

相反,请考虑组件可以在它们之间绑定数据的四种主要方法:

服务:

您可以构造一个处理组件之间通信的服务。服务是可注入的,这意味着您可以将它们注入到多个组件中,并且可以在应用程序的根目录级对其进行加载。

只需创建服务并将其提供到您需要的模块中即可。

然后-在您的服务中创建一个Observable,然后在需要访问您的信息的组件中订阅该Observable。

https://angular.io/guide/observables

上详细了解Observables。

在上面的链接中,还有一个名为“延迟序列”的示例可能适合您的目的。

NgRx:

使用Redux(NgRx)被视为实现组件之间通信的高级方法,但它是管理数据和数据检索的不可变且可靠的来源。

对于您的情况,如果您不使用它,则不要仅在此解决方案上实现它-但是要实现它,您只需在要显示或隐藏页脚时分派一个操作,然后您就可以在其他地方的商店中订阅该数据。

在此了解有关商店的更多信息:https://ngrx.io/guide/store

@输入和@输出:

如果组件是嵌套的,则可以使用输入和输出处理它们之间的数据。假设您有一个“页面”组件。从理论上讲,您的页脚将位于其中,大概您的复选框也将位于其中。 因此,您的复选框可以将值“绑定”绑定到页面组件。然后可以将其“向下”绑定到页脚组件。

这可能会变得混乱,并且仅在您确定数据也未在其他地方操纵时才应使用。

在此处阅读有关输入和输出以及常规组件通信的更多信息: https://angular.io/guide/component-interaction

事件总线:

从技术上讲,您可以使用事件总线向您的应用程序发送通知以说“立即显示此页脚”-尽管这可能不是最佳方法。

事件总线通常更多地用于通知目的,或者在您不需要知道哪个组件调用了操作的情况下使用。

基本上,事件总线只是在那儿侦听事件或情况,而不是跟踪事件发生的地点或方式。

https://angular.io/api/core/EventEmitter

上详细了解Angular中的事件发射器。