angular的核心組件化，可以說(shuō)組件化的相當(dāng)徹底。而要實(shí)現(xiàn)組件之間的通信，一個(gè)必不可少的就是輸入和輸出。通過(guò)對(duì)輸入輸出的學(xué)習(xí)，更加加深我對(duì)組件化的認(rèn)識(shí)。

組件的輸入

angular允許使用兩種形式來(lái)定義組件的輸入，一種是在裝飾器@Component中使用inputs來(lái)定義，另一種是使用@Input來(lái)定義。

inputs

首先先介紹在裝飾器中使用的輸入。inputs接收的是一個(gè)字符串?dāng)?shù)組，用來(lái)指定我們輸入的鍵名。

@Component({
 selector: 'my-component',
 inputs: ['name']
})
class MyComponent {
 name: string;
}

name就會(huì)對(duì)應(yīng)我們組件中的name變量。

然后我們定義一個(gè)組件，當(dāng)然不可避免有的時(shí)候會(huì)在其他的組件的模板中使用，所以就可以這樣寫(xiě)。

上級(jí)組件：

export class AppComponent {
 myName = 'zhangsan';
 ...
}

上級(jí)組件的模板：

<app-messages [name]="myName"></app-messages>

方括號(hào)[]：數(shù)據(jù)綁定，也叫輸入綁定。將等號(hào)右邊的變量綁定在左邊[]中的變量上。

我們的組件：

@Component({
 selector: 'app-messages',
 inputs: ['name'],
 templateUrl: './messages.component.html',
 styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
 name: string;
}

這里我們就用name接受了上級(jí)組件的myName。

通過(guò)上面的圖，就很容易看輸入數(shù)據(jù)的對(duì)應(yīng)關(guān)系。

然后我們打印一下看看變量是否成功輸入了。

export class MessagesComponent implements OnInit {
 name: string;

 ngOnInit() {
  console.log(this.name);
 }
}

成功輸入！

@Input

上面我們實(shí)現(xiàn)了組件的數(shù)據(jù)輸入，但是angular并沒(méi)有滿足現(xiàn)狀，還提供另外一種輸入的方法，就是@Input。

@Component({
 selector: 'my-component'
})
class MyComponent {
 @Input() name: string;
}

只要在我們的組件中定義變量的時(shí)候使用@Input裝飾器就行了。對(duì)比上面我們使用inputs時(shí)，少了一個(gè)二次聲明。這種方法感覺(jué)數(shù)據(jù)的傳遞少了一層關(guān)系，更加易于理解，而且代碼也更加的工整。

組件輸出

說(shuō)完了組件的輸入，下面我們就該聊聊組件的輸出了。要將數(shù)據(jù)從組件中傳遞出去，就要使用輸出綁定。

<button (click)="display()"></button>

圓括號(hào)(): 事件綁定，又叫輸出綁定。這里我們監(jiān)聽(tīng)click事件，然后觸發(fā)display方法。

除了click，angular還有很多內(nèi)置的事件，當(dāng)然，我們?cè)诰帉?xiě)自己的組件的時(shí)候，也可以自定義一個(gè)事件，來(lái)與外部通信。

自定義事件

自定義的事件需要做三件事情：

1.在@Component配置中，制定outputs配置項(xiàng)
2.在配置的屬性中，設(shè)置一個(gè)EventEmitter（事件觸發(fā)器）
3.在適當(dāng)?shù)臅r(shí)候，也就是要觸發(fā)的方法中，通過(guò)EventEmitter觸發(fā)事件

下面看一下示例：

@Component({
 selector: 'my-component',
 outputs: ['newEvent']
})
export class MyComponent {
 newEvent: EventEmitter<string>;
 
 constructor() {
  this.newEvent = new EventEmitter();
 }
 
 display(): void {
  this.newEvent.emit("test event");
 }
}

然后我們就可以通過(guò)上面模板中的代碼實(shí)現(xiàn)輸出了。

如果想在一個(gè)父級(jí)的組件中使用這個(gè)輸出，就要使用我們自己的事件了。下面看一個(gè)示例：

父級(jí)組件：

export class AppComponent {
 ...
 showEvent(message: string) {
  console.log(`hello: ${message}`);
 }
}

父級(jí)模板：

<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()">觸發(fā)</button>

引用文字

然后點(diǎn)擊觸發(fā)，可以看到輸出hello：test event。數(shù)據(jù)輸出成功！

好了我們?cè)賮?lái)梳理整個(gè)輸出過(guò)程：

1.我們自定以一個(gè)組件，通過(guò)內(nèi)置的click事件觸發(fā)display方法，這時(shí)就會(huì)觸發(fā)我們自定義的事件：newEvent。

2.當(dāng)事件觸發(fā)的時(shí)候，他會(huì)執(zhí)行上一級(jí)的方法：showEvent。

3.我們的事件輸出了一個(gè)字符串test event，然后通過(guò)$event獲取這個(gè)輸出結(jié)果，并當(dāng)做參數(shù)傳給上一級(jí)的方法showEvent

@Output

同輸入相同，angular也為我們提供了輸出的第二種方式：@Output。

用法與@input類(lèi)似：

export class MessagesComponent {
 @Output() newEvent: EventEmitter<string>;
}

只有在定義的時(shí)候，省去了重新聲明的一步。

官方參考：https://angular.io/api/core/Component

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論