angularjs - 当另一个组件发生变化时,angularjs会更新另一个组件
问题描述
你好我有这样的代码
<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 可以做到这一点吗?有什么建议吗?
解决方案
当然。我没有你的确切例子可以使用,所以这当然是一个通用的解决方案。我不会输入整个服务,但方法如下:
// 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
}
这是一个非常简单的可观察模式,在许多场景中都很有用。我相信你应该没有问题适应你的用例。您可以将该服务注入任何组件,注册其“更新”方法,然后从任何其他组件调用所有已注册的“更新”方法。不要忘记在销毁组件时取消注册组件的任何“更新”方法。
推荐阅读
- .net - ASP NET CORE 2 部署
- python - Python中字符串和int之间的异或
- python - 将用户名传递给 Django 表单
- vb.net - Click-Once 连接因未指定用户代理而关闭
- protocol-buffers - 在 protobuf v2 中使用地图
- excel - 将报表作为 BMP 从 Excel 复制到 Outlook,并且迷你图不会复制
- reactjs - 使 store 值在 React Redux 组件之外可用
- java - 如何在 Spring 中使用 Apache Commons PropertiesConfiguration 作为 MessageSource?
- json - 如果其中一个始终为空,如何简单地解码两种数据类型的可编码属性?
- sql - 如何在 SQL 中滞后多个月