angular的輸入和輸出
angular的核心元件化,可以說元件化的相當徹底。而要實現元件之間的通訊,一個必不可少的就是輸入和輸出。通過對輸入輸出的學習,更加加深我對元件化的認識。
元件的輸入
angular
允許使用兩種形式來定義元件的輸入,一種是在裝飾器@Component
中使用inputs
來定義,另一種是使用@Input
來定義。
inputs
首先先介紹在裝飾器中使用的輸入。inputs
接收的是一個字串陣列,用來指定我們輸入的鍵名。
@Component({ selector: 'my-component', inputs: ['name'] }) class MyComponent { name: string; }
name
就會對應我們元件中的name
變數。
然後我們定義一個元件,當然不可避免有的時候會在其他的元件的模板中使用,所以就可以這樣寫。
上級元件
:
export class AppComponent {
myName = 'zhangsan';
...
}
上級元件的模板
:
<app-messages [name]="myName"></app-messages>
方括號[]
:資料繫結,也叫輸入繫結。將等號右邊的變數繫結在左邊[]
中的變數上。
我們的元件
:
@Component({ selector: 'app-messages', inputs: ['name'], templateUrl: './messages.component.html', styleUrls: ['./messages.component.css'] }) export class MessagesComponent implements OnInit { name: string; }
這裡我們就用name
接受了上級元件的myName
。
通過上面的圖,就很容易看輸入資料的對應關係。
然後我們列印一下看看變數是否成功輸入了。
export class MessagesComponent implements OnInit {
name: string;
ngOnInit() {
console.log(this.name);
}
}
成功輸入!
@Input
上面我們實現了元件的資料輸入,但是angular
並沒有滿足現狀,還提供另外一種輸入的方法,就是@Input
。
@Component({ selector: 'my-component' }) class MyComponent { @Input() name: string; }
只要在我們的元件中定義變數的時候使用@Input
裝飾器就行了。對比上面我們使用inputs
時,少了一個二次宣告。這種方法感覺資料的傳遞少了一層關係,更加易於理解,而且程式碼也更加的工整。
元件輸出
說完了元件的輸入,下面我們就該聊聊元件的輸出了。要將資料從元件中傳遞出去,就要使用輸出繫結
。
<button (click)="display()"></button>
圓括號()
: 事件繫結,又叫輸出繫結。這裡我們監聽click
事件,然後觸發display
方法。
除了click,angular
還有很多內建的事件,當然,我們在編寫自己的元件的時候,也可以自定義一個事件,來與外部通訊。
自定義事件
自定義的事件需要做三件事情:
1.在@Component配置中,制定outputs
配置項2.在配置的屬性中,設定一個EventEmitter(事件觸發器)
3.在適當的時候,也就是要觸發的方法中,通過EventEmitter
觸發事件
下面看一下示例:
@Component({
selector: 'my-component',
outputs: ['newEvent']
})
export class MyComponent {
newEvent: EventEmitter<string>;
constructor() {
this.newEvent = new EventEmitter();
}
display(): void {
this.newEvent.emit("test event");
}
}
然後我們就可以通過上面模板中的程式碼實現輸出了。
如果想在一個父級
的元件中使用這個輸出,就要使用我們自己的事件了。下面看一個示例:
父級元件:
export class AppComponent {
...
showEvent(message: string) {
console.log(`hello: ${message}`);
}
}
父級模板:
<app-messages (newEvent)="showEvent($event)"></app-messages>
我們的元件:
@Component({
selector: 'app-messages',
outputs: ['newEvent'],
templateUrl: './messages.component.html'
})
export class MessagesComponent {
newEvent: EventEmitter<string>;
constructor(private messageService: MessageService) {
this.newEvent = new EventEmitter();
}
display(): void {
this.newEvent.emit('test event');
}
}
我們的元件模板:
<button (click)="display()">觸發</button>
引用文字
然後點選觸發,可以看到輸出hello:test event
。資料輸出成功!
好了我們再來梳理整個輸出過程:
1.我們自定以一個元件,通過內建的click事件
觸發display
方法,這時就會觸發我們自定義的事件:newEvent
。
2.當事件觸發的時候,他會執行上一級的方法:showEvent
。
3.我們的事件輸出了一個字串test event
,然後通過$event
獲取這個輸出結果,並當做引數傳給上一級的方法showEvent
@Output
同輸入相同,angular
也為我們提供了輸出的第二種方式:@Output
。
用法與@input
類似:
export class MessagesComponent {
@Output() newEvent: EventEmitter<string>;
}
只有在定義的時候,省去了重新宣告的一步。