美文网首页
Angular6中使用eventEmit在组件间通信后数据绑定无

Angular6中使用eventEmit在组件间通信后数据绑定无

作者: Liekkasz | 来源:发表于2018-11-01 16:06 被阅读0次

问题描述:
项目中某个页面需要在两个组件tree,list之间通过eventEmit通信,点击tree,list查询数据。同时List界面中某个变量在页面中进行了双向绑定,最终发现点击tree后,双向绑定的数据无法更新,但通过console.log打印变量却又发现变量更新了。

问题解决:
订阅消息、回调函数等,有可能跳出了Angular的zone,所以需要注入ChangeDetector,显式地通知Angular框架进行更新,类似于Angular1.x中的apply(),具体做法如下

constructor(public eventEmitService: EventEmitService,
                private changeDetectorRef: ChangeDetectorRef) {
    }

ngOnInit() {
        // 接收发射过来的数据
        this.eventEmitService.eventEmit.subscribe((obj: any) => {
                // 更新界面
                this.changeDetectorRef.markForCheck();
        });
    }

相关文章

  • Angular6中使用eventEmit在组件间通信后数据绑定无

    问题描述:项目中某个页面需要在两个组件tree,list之间通过eventEmit通信,点击tree,list查询...

  • Vue学习总结

    基本结构 源生指令 绑定事件 数据渲染 控制隐藏 渲染循环 数据绑定 组件间通信 计算属性 监听器 父子组件通信 ...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • Vue.js中组件通信的方法

    父子组件的通信方法首先父组件需要v-bind绑定数据,在子组件中用props进行接收数据,这样,父组件中的数据变动...

  • Vue2 组件通信写法总结

    组件通讯包括:父子组件间的通信和兄弟组件间的通信。具体有以下几种情况。 父组件传递数据给子组件 父组件使用 Pro...

  • Vue学习(二)

    二、Vue 1.Data属性 2.Props属性 父子组件 在父组件中定义数据 在使用组件式,绑定父组件中的数据 ...

  • React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子...

  • vue中父子组件间的通信

    1.父组件通过props向子组件通信 #1.先给父组件中绑定自定义的属性 #2.在子组件中使用prop...

  • Vue的组件通信

    Vue的父子通信问题 参考文档 : Vue 组件组合 使用 props传递数据 用v-on 绑定事件 原理: 父子...

  • React组件间通信

    1. 组件间通信1.1.父组件向子组件通信1.2.子组件向父组件通信1.3.跨级组件间通信1.4.无嵌套关系组件间...

网友评论

      本文标题:Angular6中使用eventEmit在组件间通信后数据绑定无

      本文链接:https://www.haomeiwen.com/subject/lmyxxqtx.html