一.通過(guò)setter 截聽(tīng)輸入屬性值的變
利用getter setter對(duì)值進(jìn)行獲取和處理
二. ngOnChanges()來(lái)截聽(tīng)輸入屬性值的變化
監(jiān)測(cè)輸入屬性值的變化
當(dāng)需要監(jiān)視多個(gè)氛悬、交互式輸入屬性的時(shí)候眉枕，本方法比用屬性的 setter 更合適衡瓶。
三.父組件監(jiān)聽(tīng)子組件的事件(組件輸入輸出)
@Input() name = '';//父組件->向子組件傳遞數(shù)據(jù)镇防。
@Output() voted = new [EventEmitter]<boolean>();//父組件可以獲取子組件的信息，同時(shí)父組件要?jiǎng)?chuàng)建html監(jiān)聽(tīng)
EventEmitter是node.js的一個(gè)監(jiān)聽(tīng)器民珍。
四.父級(jí)調(diào)用 @ViewChild()
@ViewChild可以獲取到當(dāng)前組件視圖中的單個(gè)元素
@ViewChildren獲取子組件對(duì)象列表
1.局部變量訪問(wèn)
@ViewChild('changeColor',{static:true}) changeColor;
2.直接指定組件類
父類的html
<app-home [items]="items" #home ></app-home>
<!-- #home要寫在子控件的里面 -->
<button (click)="appComponentAction()" >父級(jí)點(diǎn)擊這里</button>
父類的Ts
// 子類的聲明
@ViewChild('home',{static:true}) home:HomeComponent;
// 實(shí)現(xiàn)點(diǎn)擊事件
appComponentAction(): void{
// 通過(guò)home子類調(diào)用屬性和方法
this.home.textColor1 = 'd';
this.home.run();
}
}
子類只需要實(shí)現(xiàn)這倆個(gè)方法和公開(kāi)屬性就好
@Input()
set textColor1(value:string){
console.log('textcolor:'+value);
this.textColorStr = value;
}
get textColor1():string{
return this.textColorStr ;
}
run(){
console.log('running');
}
