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



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

由于页脚是设置组件的单独组件,因此我目前需要让 setTimeout 上的页脚每 5 秒检查一次局部变量。

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

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

有没有其他方法可以做到这一点并让组件本身更新,而不必一直有一个计时器循环来检查 localstorage 变量中是否有任何更改,或者这是推荐的方法?

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

这意味着,如果您选中了复选框,您仍然有机会等待近 5 秒钟,以获得有关您在公开或关闭的页脚结果中所做的操作的反馈。

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

服务业:

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

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

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

阅读有关可观察量的更多信息,请访问: https://angular.io/guide/observables

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

NgRx:

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

对于你的方案,如果不使用它,请不要单独在此解决方案上实现它 - 但是,若要完成它,只需在要显示或隐藏页脚时调度一个操作,然后可以在其他位置订阅存储中的数据。

在此处阅读有关商店的更多信息:https://ngrx.io/guide/store

@Inputs和@Outputs:

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

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

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

事件总线:

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

事件总线的使用通常更多地用于通知目的,或者当你不需要知道哪个组件调用了操作发生时。

从本质上讲,事件总线只是用来监听事件或情况,而不是追踪它在哪里或如何发生的。

阅读有关 Angular 中的事件模拟器的更多信息,请点击此处:https://angular.io/api/core/EventEmitter

最新更新