angular组件通信方式

父传子

父组件传值

<child [content]="'123'"></ child>

子组件接收

@Input() content: string;

子传父

方式一：
子组件传值

@Output() onSend: EventEmitter<string> = new EventEmitter<string>();
ngOnInit() {
	this.onSend.emit('content');
}

父组件接收

// html文件
<child (onSend)="onsend($event)"></child>
// ts文件
onsend(val: string){
	console.log(val);  // content
}

方式二：
父组件通过@ViewChild获取子组件dom调用数据或方法

子组件

// ts文件
data: any = {id: 1, name: 'ccc'};
run(val: String){
	console.log(this.data, val);
}

父组件

// html文件
<child #childComponent (onSend)="onsend($event)"></child>
<button (click)="callRun()">调用子组件run方法</button>
// ts文件
@ViewChild('childComponent') childComponent: any;
callRun() {
	console.log(this.childComponent.data)
	this.childComponent.run('123456');
}

兄弟组件传值

1. 可通过公共父组件
2. 通过服务