淺談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父子組件間怎麼進行通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！