Angular父子組件間如何進行通信

小編給大家分享一下Angular父子組件間如何進行通信，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

組件通信

組件是一個完整獨立的，因此彼此之間的數據不會共享，想在組件之間共享數據，就要實現組件間的通信。【相關教程推薦：《angular教程》】

組件間通信

• 父組件向子組件通信

• 子組件向父組件通信

ng6為了實現組件間通信，提供了吞吐器：Input，Output

父組件向子組件通信

ng6基于ts實現，因此通信的數據要定義類型（了解內部的結構，分配內存空間）

父組件向子組件通信，子組件是接收方，因此要使用Input吞吐器

實現父組件向子組件通信分成6步

第一步 父組件模板中，為子組件傳遞數據，如果數據是動態可變的，可以使用[]語法糖

第二步 定義數據模型類（如果數據非常簡單，可以省略該步）

定義模型類也可以使用ng指令

ng class 類名

模型類的命名規范：我們可以定義成.model.ts文件。也可以將文件直接放在models目錄下，并定義成.ts文件

第三步 子組件中，引入模型類

第四步 子組件中，引入吞吐器Input

第五步 通過吞吐器，接收數據，有兩種方式

• 第一種 通過Input吞吐器注解類的方式，接收數據

@Input() 數據名稱: 模型類;

• 第二種 還可以通過組件的注解元信息inputs接收

注解類中：inputs: [屬性數據]

組件中：屬性數據: 模型類;

第六步 使用數據，由于數據被添加給組件自身了，因此不論是在組件中，還是在模板中都可以使用

舉例：

// 4 引入吞吐器
import { Component, OnInit, Input } from '@angular/core';
// 3 引入模型類
import { Data } from '../../models/data';
@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],
    // 5 通過元信息接收
    inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
    // 5 接收數據
    // @Input() data: Data;
    // @Input() color: string;
    // 聲明類型
    data: Data;
    color: string;
    constructor() {
        // 6 組件中使用
        console.log(this)
    }
    ngOnInit() {
    }
}

子組件向父組件通信

子組件向父組件通信是基于自定義事件實現的。對于子組件來說，是發布方，因此要使用Ouput吞吐器

實現子組件向父組件通信分成六步

第一步 在父組件模板中，模擬DOM事件，為子組件元素綁定父組件的方法，使用()語法糖

例如 (demo)="dealDemo($event)"

為了傳遞數據，要添加$event

第二步 在子組件中，引入吞吐器 Output

第三步 在子組件中，引入EventEmitter事件模塊

第四步 為子組件創建事件對象，有兩種方式

• 第一種 通過Output吞吐器注冊

@Output() 屬性名稱 = new EventEmitter()

• 第二種 還可以通過注解的元信息outputs接收

在注解中，注冊屬性   outputs: [屬性名稱]

組件中，創建事件對象 屬性名稱 = new EventEmitter()

第五步 子組件中，通過事件對象的emit方法發布消息，參數就是傳遞的數據

第六步 在父組件中，通過父組件方法，接收子組件傳遞的數據

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'app-outputs',
    templateUrl: './outputs.component.html',
    styleUrls: ['./outputs.component.css'],
    // 元信息注冊事件對象
    outputs: ['sendMessage']
})
export class OutputsComponent implements OnInit {
    // 4 注冊事件對象
    // @Output() sendMessage = new EventEmitter();
    // 實例化
    sendMessage = new EventEmitter();
    constructor() { }
    ngOnInit() {
    }
    // 事件回調函數
    demo() {
        // console.log(111, this)
        // 5 點擊按鈕的時候，向父組件發布消息
        this.sendMessage.emit({
            msg: 'hello菜鳥',
            color: 'red'
        })
    }
}

以上是“Angular父子組件間如何進行通信”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！