Angular入門之輸入輸出繫結
阿新 • • 發佈:2019-01-06
入門小白一隻,可能部分理解不到位,如有錯誤望請指正,謝謝~
輸入
資料通過輸入繫結流入元件,事件通過輸出繫結流出你的元件。
[]用來由父元件向子元件傳遞輸入。
父元件:
@component({
selector:'par-component-name',
template:`
<child-component-name ['1']="2">
</child-component-name>
`
})
class par-class-name{
2;
}
子元件:(兩種方法)
方法一:
@component({
selector:'child-component-name' ;
inputs:['3:1'] //inputs:[鍵值對陣列]
})
class kid-class-name{
3;
}
若3,1同名,即該輸入屬性的內外名字相同,則可簡化為如下,這也是常見情況:
@component({
selector:'child-component-name';
inputs:['1'] //inputs:[鍵值對陣列]
})
class kid-class-name{
1;
}
鍵值對陣列中:
鍵:3,本元件控制器內的屬性名
值:1,出現在HTML標籤中,顯示外觀時的名字
方法二:
@component({
selector: 'child-component-name';
})
class kid-class-name{
@Input('1') 3;
}
若3,1同名,即該輸入屬性的內外名字相同,則可簡化為如下,這也是Angular風格指南建議的:
@component({
selector:'child-component-name';
})
class kid-class-name{
@Input() 3;
}
一個例項:
/**
*@InventoryApp 父元件
*/
@Component({
selector:'inventory-app',
template:`
<div>
<product-list
[productList]="products" > //關鍵語句
</product-list>
</div>
`
})
class InventoryApp{
products:Product[]; //父元件宣告的屬性
constructor(){
this.products=[]
}
}
/**
*@ProductList 子元件
*/
@Component({
selector:'products-list',
inputs:['productList'], //第一種方法
outputs:['onProductSelected'], //輸出,下一部分有講解
template:``
})
class ProductList{
productList: Product[]; //子元件宣告的屬性
}
輸出
()用來由子元件向父元件傳遞輸出。再來重複一遍,資料通過輸入繫結流入元件,事件通過輸出繫結流出你的元件!!
情況一:輸出的事件為元件內建事件
核心語句:(output)=”action”
@component({
selector:'child-component-name',
template:`
<button (click)="1()"> </button>
//即(output)="action",此處只是舉例output為點選按鈕,可以是任何內建事件的,比如表單裡許多控制元件都可以click,dbl-click,keydown,mousedown,mousemove等;action是本控制元件控制器內要實現的一個函式
`
})
class kid-class-name{
1(){
//點選按鈕後要求執行的動作
}
}
情況二:輸出的事件為自定義事件,來和元件外部通訊
其實就是使用了觸發事件的情況一,核心語句還是:(output)=”action”,不過這裡的output一般是子元件內宣告的一個EventEmitter物件,當它通過emit()方法釋出事件時,父元件內實現的action函式,用$event
引數接收這個事件發出的內容,來執行action函式
如果之前沒有接觸過觀察者模式,可能有點難理解,可以去大概瞭解下概念就好了
父元件:
@component({
selector:'par-component-name',
template:`
<child-component-name (1)="2($event)"> //沒錯,還是(output)="action"
</child-component-name>
`
})
class par-class-name{
2():{} //一個函式,通常有一個引數,來接收EventEmitter發出的資料
}
子元件:
@component({
selector:'child-component-name',
outputs:['1'] , //陣列,可有多個輸出事件屬性
template:`
<button (click)="3()"> </button>
`
})
class kid-class-name{
1: EventEmitter<>;
constructor(){
this.1=new EventEmitter();
//當把一個EventEmitter物件賦值給一個輸出時,Angular會自動幫我們訂閱事件
}
3(){ //這裡就是情況一啦
1.emit("要傳送的資料"); //相當於是父元件的函式2訂閱了1這個EventEmitter物件,所以1發射的資料會被函式2的$event引數接收到
}
}
來看一個情況二實際的小例子:
//父元件
@Component({
selector:'club',
template:`
<div>
<single-component
(putRingOnIt)="ringWasPlaced($event)",>
</single-component>
`
})
class ClubComponent{
ringWasPlaced(message:string){
console.log(`Put your hands up: ${message}`);
//`${message}` 叫做 字串插值,即顯示message的文字內容
}
}
//子元件
@Compnent({
selector:'single-component';
outputs:[putRingOnIt];
template:`
<button (click)="likes()">Like it?</button>
`
})
class SingleComponent{
putRingOnIt:EventEmitter<string>;
constructor(){
this.putRingOnIt=new EventEmitter();
}
liked():void{
this.putRingOnIt.emit("oh oh oh");
}
}