当另一个组件发生变化时，angularjs会更新另一个组件[重复]

Question

你好，我有这样的代码

<section>
  <component1></component1>
  <component2></component2>
</section>

现在在组件 1 中我有这样的保存表单的操作

export default function Component1Controller() {
  this.save = save.bind(this);
  function save(valid) {
    // save magic
  }
}

如果已保存，那么我想在第二个控制器中更新视图

export default function Component2Controller() {;
 function update() {
   //run update when component1 saved data
 }
}

没有功能 $on 或 $watch 可以做到这一点吗？ 有什么建议吗？

Answer 1

当然。我没有你的确切例子可以使用，所以这当然是一个通用的解决方案。我不会输入整个服务，但方法如下：

// service setup...

const service = this;

service.registeredComponents = {};

service.register = (id, func) => {
  service.registeredComponents[id] = func;
};

service.callAllRegistered = (options /* whatever you want to pass */) => {
  Object.keys(service.registeredComponents).forEach((key) => service.registeredComponents[key](options));
};

service.deregister = (id) => {
  service.registeredComponents[id] = () => {};
  // or just delete the id, I did this instinctually, but you dont have to
}

这是一个非常简单的可观察模式，在许多场景中都很有用。我相信你应该没有问题适应你的用例。您可以将该服务注入任何组件，注册其“更新”方法，然后从任何其他组件调用所有已注册的“更新”方法。当组件被销毁时，不要忘记取消注册组件的任何“更新”方法。