Question

你好，我有这样的代码

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

现在在component1中，我可以执行类似保存表单的操作

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
}

这是一个非常简单的可观察模式，在许多情况下都很有用。我相信您应该毫无疑问地将其适应您的用例。您可以将该服务注入任何组件，注册其“ update”方法，然后从任何其他组件调用所有已注册的“ update”方法。销毁组件时，请不要忘记注销其任何“更新”方法。

当另一个组件发生更改时，angularjs会更新另一个组件

1 个答案: