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>;
}

只有在定義的時候，省去了從新聲明的一步。

---

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