angular-父子组件之间通信的总结

 一：父组件->子组件通信

1.setter访问器属性

通过set和get来定义子组件的属性，来实现父组件到子组件的数据传输

private _o_ = '';
public get o(){
    return this._o_;
}
public set o(value){
    this._o_ = value;
}

set可以省略，若省略就是只读属性。作为数据传输会报错。

2. angular组件的生命周期Onchanges

在这个钩子函数中，可以拿到变化的数据，也有一些其他的属性，比如first；

3. 利用DI注入子组件

用法是需要在父组件里通过注入获取子组件的实例，通过调用子组件实例的方法来实现数据通信；

获取子组件的方法： 模板变量获取子组件，@viewChild（）

4.注册Service并注入，由于Service注入后，在其作用域内具有单例特性，故可以实现数据的通信。例子如下：

实现方法不一定用Subject，也可以用Proxy或者命令模式即可。（该方法也可以用于子组件到父组件的通信）

@Injectable({
	provideIn: 'root'
})
class DemoService {
	done: Function;
	constructor(){}
	private _Store_ = new Map();
	run(o: string, item){
		const s = this._Store_.get(s);
		if (!s) {
			console.error(s, '...')
		}
		s.next({o,item})
	}
	register(o: string,action){
		if (!this._Store_.has(o)){
			this._Store_.set(o, new Subject());
		}
		this._Store_.get(o).subscribe((res) => {
			try{
				action(res)
			}
		})
	}
	registDone(cb){
		this.done  = cb;
	}
	destroy(){
	}
}

二 子组件->父组件

总体思想就是注入，但是不同的注入方法是不同的思想

利用DI注入父组件，可以注册provider，也可以直接注入

@Optional() p: ParentComponent或者@Inject（forwardRef(() => ParantComponent)）

进一步优化，该函数为不同的父组件注册不同的provider；

export function provideParent
  (component: any, parentType?: any) {
    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
  }

进阶通过服务注入是想父子组件之间的通信