组件传值 事件绑定
输入 Input属性通常接收数据值。 输出 Output属性暴露事件生产者，如 EventEmitter 对象。
//父组件
<app-test-details [hero]="hero" (setHero)="setHeroName($event)"></app-test-details>
//接收子组件事件
setHeroName(hero: Hero) {
this.heros.forEach(val => {
if (val.id === hero.id) {
val.name = hero.name;
}
});
}
//子组件
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
export class TestDetailsComponent implements OnInit {
//接收父组件数据
@Input() hero: Hero;
//@Input('newHero') hero: Hero; //起别名 （不推荐起别名）
//输出方法
@Output() setHero = new EventEmitter();
updateHero() {
//将数据传递给父组件 调用父组件事件
this.setHero.emit(this.hero);
}
}
父组件调用子组件事件
1.父组件与子组件通过本地变量互动
#hero
<app-test-details #child [hero]="hero"></app-test-details>
<button (click)="child .testParent()">click</button>
//子组件中定义方法
testParent() {
console.log("子组件方法被调用")
}
2.父组件通过@ViewChild()调用子组件事件
@ViewChild()
import {Component, OnInit, ViewChild} from '@angular/core';
import {TestDetailsComponent} from '../test-details/test-details.component';
export class TestComponent implements OnInit {
@ViewChild(TestDetailsComponent)
child: TestDetailsComponent;
constructor() {}
clickTest() {
//调用子组件事件
this.child.testParent();
}
}
