隨著項(xiàng)目體系的龐大瘤运，任何前端框架都少不了組件之間得通信與傳值阱扬。
一. 父傳子
- 在父組件ts中定義一個(gè)數(shù)據(jù)list
export class AppComponent{
list = ["小明"绪抛，"小張"盹牧，"王麻子"]
}
- 在html中使用中括號[]傳值
<app-child [list]="list"></app-child>
- 在子組件ts中使用@Input接收
記得從@angular/core中引入Input
import {Component,OnInit,Input} from '@angular/core';
export class ChilcComponent implements OnInit {
//輸入list數(shù)據(jù)
@Input() list : string[];
}
- 在子組件html中可以遍歷使用了
<div *ngFor="let item of list">
{{item}}
</div>
二、子傳父
- 在子組件中需要用到Output和事件發(fā)射器EventEmitter（接上面的例子）
import {Component,OnInit,Input} from '@angular/core';
export class ChilcComponent implements OnInit {
//輸入list數(shù)據(jù)
@Input() list : string[];
//輸出 選中下標(biāo)
@Output() selectNum = new EventEmitter();
ngOnInit():void{
}
setCurrent(i){
this.current = i;
this.selectNum.emit();
}
}
html中增加點(diǎn)擊事件
<div *ngFor="let item of list; let i = index"
[ngClass]="{'active' : i === current}"
(click)="setCurrent(i)">
{{item}}
</div>
- 回到父組件叫确，父組件中訂閱的事件被觸發(fā)
注意南用，這里接受selectType的事件參數(shù)膀钠，必須為"$event"
<app-child [list]="list" (selNum)="selectType($event)">
</app-child>
- 當(dāng)然，要在父組件ts中提前訂閱好上面的selNum方法
export class AppComponent{
selectType = "全部"
list = ["小明"裹虫，"小張"肿嘲，"王麻子"]；
selectType(){
this.selectType = this.list[i];
}
}
- 最后筑公，可以在父組件中肆無忌憚地使用了
<app-child [list]="list"></app-child>
<h3>選中的姓名為：{{selectType }}</h3>
