父组件有一个对象,就叫对象A,对象里面的数据用于渲染父组件视图,子组件有一个对象B,用于渲染子组件视图。
要实现的效果就是:在子组件界面上编辑对象B的数据(就像修改个人信息一样),再在子组件.ts中监听对象B里面的每一个数据的变化,只要有任何一个数据变化,就需要去改变父组件对象A里面数据,再通过对象A改变父组件视图。
自己做过的尝试:
1.用doCheck监听,能实时监听到数据的变化,再用事件触发机制去触发通知父组件改变对象A的值,再修改视图。(或者将对象A传入子元素,通过监听到对象B数据改变后,直接在子组件里面直接修改对象A的数据),两种方式的效果一致,可以改变,问题是会触发angular的检测机制,angular检测机制会检测到父组件两次渲染视图数据不同而报错。处理方法:1.屏蔽检测机制:能屏蔽console报错,但是机制依旧存在,达不到效果。2.改变emit的触发方式,将触发方式改为异步触发,能达到预期的想过,但是emit会一直触发,就像interval一样,会造成更严重的问题。
2。用naOnChange监听,将对象B先在父元素里面获取,在传入子元素,通过ngOnChang来监听对象B的变化,从而改变对象A,问题:ngOnChange无法监听到对象里面的数据变化,只能监听基本数据类型的数据变化。后面改变值的时候可能也会触发检测机制
angular小白一个,没有参透angular,实在想不到其他的实现办法,请求大家的帮助
其实我很不喜欢父子组件的说法,我个人觉得这里不存在父子的关系,因为真实的 DOM 最后指不定谁包含谁,组件和组件之间只有谁被谁使用的关系。
那么问题就是,有一个组件内部维护了一个对象 B,其 view 会有控件对 B 的属性进行编辑,编辑后需要通知外部数据有改动,另一个组件会使用这个组件并监听数据改动。
那么问题就来了,这个组件的内部对象什么时候会被改动??为什么会需要监听 doCheck/ngOnChange ? 这俩货是用来处理组件的输入数据有变动的呀。你这个自己的数据的改动必然来自 View 中的用户输入,用户输入就会有事件,你要做的是在这些事件产生时,你再额外以组件事件的形式对外通知一下,我的数据有变动,使用者请知悉。你如果使用的是 FormGroup 那更简单直接 valueChange 做一下 map 就是你要的事件。