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('我是子页面要传递给父页面的数据');
}