angulr爬坑之父子组件间通信方法

父组件向子组件传数据

方法1：通过输入型绑定把数据从父组件传到子组件 @Input

通常带@Input 装饰器。

//	parent.component.html	父组件
<app-child [parentMes]="parentMes"></app-child>

//	parent.component.ts		父组件
parentMes='我是父页面要传递给子页面的信息';	//	变量名称必须与父模块html""中的名字一致

//	child.component.ts	子组件
@Input() parentMes: string;	//	变量名称必须与父模块html[]中的名字一致
ngOnInit() {
	console.log(this.parentMes);
}

方法2：通过 setter 截听输入属性值的变化

//	parent.component.html	父组件
<app-child [parentMes]="parentMes"></app-child>

//	parent.component.ts		父组件
parentMes='我是父页面要传递给子页面的信息';	//	变量名称必须与父模块html""中的名字一致

//	child.component.ts		子组件
_parentMes: string;
@Input()	//	此处后面不得跟;
set parentMes(mes: string) {	//	事件名称必须与父模块html[]中的名字一致
	this._parentMes = mes;
}
get parentMes(): string {
    return this._parentMes;
}
ngOnInit() {
	console.log(this.parentMes);
}

方法3：通过事件把数据从父组件传到子组件

父页面调用子页面事件

//	parent.component.html	父组件 
<button (click)="child.getParentMes(parentMes)"></button>
<app-child #child></app-child>

//	parent.component.ts		父组件
parentMes='我是父页面要传递给子页面的信息';	//	变量名称必须与父模块html方法中的参数名字一致

//	child.component.ts		子组件
getChildMes(mes) {	//	事件名称必须与父模块html中的事件名一致
    console.log(mes);
}

子组件向父组件传数据

方法1：通过父组件调用@ViewChild()

//	parent.component.html	父组件 
<app-child></app-child>

//	parent.component.ts		父组件
@ViewChild(ChildComponent) child: ChildComponent;
ngOnInit() {
	console.log(this.child.childMes );
}	

//	child.component.ts		子组件
childMes = '我是子页面要传递给父页面的数据';

方法2：通过“#”把数据从子组件传到父组件

子组件加上属性标记，只能在html中使用，ts中无效

//	parent.component.html	父组件 
<app-child #child></app-child>
<p>{{child.childMes}}</p>

//	child.component.ts		子组件
childMes = '我是子页面要传递给父页面的数据';

方法3：通过事件把数据从子组件传到父组件 @Output

子页面调用父页面事件；通常带@Output装饰器。

//	parent.component.html	父组件 
<app-child (mesChange)="mesChange($event)"></app-child>

//	parent.component.ts		父组件
mesChange(mes) {	//	事件名称必须与父模块html方法名字一致
	console.log(mes);  
}	

//	child.component.ts		子组件
@Output() mesChange = new EventEmitter();
ngOnInit() {
	this.mesChange.emit('我是子页面要传递给父页面的数据');
}