Angular EventEmitter 与通过服务进行通信

标签 angular

假设我们有一个深层嵌套的架构,其中包含一个主要组件和 3 层子组件。例如:

todo->todo list->todo list action bar->todo list button

还会有其他组件。

当我们使用 EventEmitter 时,我们必须遍历所有层直到 todo 组件。 另一种方法是使用带有可观察对象的通信服务,以便从按钮组件与待办事项组件进行通信。

使用一种方式或另一种方式有哪些优缺点?我应该走什么路?

最佳答案

这是一个设计视角。

通常我发现如果应用程序大小中等到巨大,则使用 Behaviour SubjectReplay Subject 将消息传输到其他组件的共享服务.

更好的设计是在 Angular 中使用 redux 来实现 ngrxi:e。 唯一的缺点是你需要为你的 Action 和 reducer 编写额外的代码,但优点是所有逻辑都与 redux 世界中称为dumb组件的组件分开。一旦完成,使用 ngrx dev tools 随时跟踪状态将是一个救命稻草,您将很容易跟踪触发哪个事件或操作,以及如何调试和制作添加代码。

只有当您的应用程序很小时,我才会建议您使用事件发射器,就像您陷入意大利面条代码中的多个嵌套组件一样。您无法跟踪所有触发事件,然后您最终不得不重新编写代码。

有关使用事件发射器与共享服务的更多信息 LINK .有一个特定的问题。

关于 ngrx 的更多信息 LINK .此链接使用 ngrx v2。

我曾使用 ngrx v.4 开发过一个小型应用程序,以下是相同 git 的 git 存储库和工作example

关于Angular EventEmitter 与通过服务进行通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45604836/

相关文章:

Angular 7 Http删除api句柄主体?

angular - 无法从 Webpack 配置向 Angular 2 提供环境变量

angular - 组件 'TopSearchBarComponent' 由多个 NgModule 声明 - Angular 10

html - 如何使用 css 制作一个像 bootstrap 弹出窗口一样的 div

javascript - 是否可以在 Angular 4 中的这两个索引之间设置两个索引 & ngFor

javascript - 带两个参数的回调 ES6 箭头函数 Angular2

angular - 模拟非原生元素上的鼠标单击或 Enter 按键

angular - 代码块内的jsdoc @字符

angular - 为某些调用禁用 Angular HttpInterceptor

javascript - 在哪里放置谷歌标签管理器标签片段在 Angular 中?