組件傳值 事件綁定
輸入 Input屬性通常接收數(shù)據(jù)值唬渗。 輸出 Output屬性暴露事件生產(chǎn)者，如 EventEmitter 對(duì)象肩榕。
//父組件
<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 {
//接收父組件數(shù)據(jù)
@Input() hero: Hero;
//@Input('newHero') hero: Hero; //起別名 （不推薦起別名）
//輸出方法
@Output() setHero = new EventEmitter();
updateHero() {
//將數(shù)據(jù)傳遞給父組件 調(diào)用父組件事件
this.setHero.emit(this.hero);
}
}
父組件調(diào)用子組件事件
1.父組件與子組件通過本地變量互動(dòng)
#hero
<app-test-details #child [hero]="hero"></app-test-details>
<button (click)="child .testParent()">click</button>
//子組件中定義方法
testParent() {
console.log("子組件方法被調(diào)用")
}
2.父組件通過@ViewChild()調(diào)用子組件事件
@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() {
//調(diào)用子組件事件
this.child.testParent();
}
}
