Angular父子組件間如何進(jìn)行通信

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

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),自適應(yīng)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢(qián):18982081108

組件通信

組件是一個(gè)完整獨(dú)立的，因此彼此之間的數(shù)據(jù)不會(huì)共享，想在組件之間共享數(shù)據(jù)，就要實(shí)現(xiàn)組件間的通信。【相關(guān)教程推薦：《angular教程》】

組件間通信

父組件向子組件通信
子組件向父組件通信

ng6為了實(shí)現(xiàn)組件間通信，提供了吞吐器：Input，Output

父組件向子組件通信

ng6基于ts實(shí)現(xiàn)，因此通信的數(shù)據(jù)要定義類型（了解內(nèi)部的結(jié)構(gòu)，分配內(nèi)存空間）

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

實(shí)現(xiàn)父組件向子組件通信分成6步

第一步父組件模板中，為子組件傳遞數(shù)據(jù)，如果數(shù)據(jù)是動(dòng)態(tài)可變的，可以使用[]語(yǔ)法糖

第二步定義數(shù)據(jù)模型類（如果數(shù)據(jù)非常簡(jiǎn)單，可以省略該步）

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

ng class 類名

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

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

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

第五步通過(guò)吞吐器，接收數(shù)據(jù)，有兩種方式

第一種通過(guò)Input吞吐器注解類的方式，接收數(shù)據(jù)

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

第二種還可以通過(guò)組件的注解元信息inputs接收

注解類中：inputs: [屬性數(shù)據(jù)]

組件中：屬性數(shù)據(jù): 模型類;

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

舉例：

// 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 通過(guò)元信息接收
    inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
    // 5 接收數(shù)據(jù)
    // @Input() data: Data;
    // @Input() color: string;
    // 聲明類型
    data: Data;
    color: string;
    constructor() {
        // 6 組件中使用
        console.log(this)
    }
    ngOnInit() {
    }
}

子組件向父組件通信

子組件向父組件通信是基于自定義事件實(shí)現(xiàn)的。對(duì)于子組件來(lái)說(shuō)，是發(fā)布方，因此要使用Ouput吞吐器

實(shí)現(xiàn)子組件向父組件通信分成六步

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

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

為了傳遞數(shù)據(jù)，要添加$event

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

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

第四步為子組件創(chuàng)建事件對(duì)象，有兩種方式

第一種通過(guò)Output吞吐器注冊(cè)

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

第二種還可以通過(guò)注解的元信息outputs接收

在注解中，注冊(cè)屬性 outputs: [屬性名稱]

組件中，創(chuàng)建事件對(duì)象 屬性名稱 = new EventEmitter()

第五步子組件中，通過(guò)事件對(duì)象的emit方法發(fā)布消息，參數(shù)就是傳遞的數(shù)據(jù)

第六步在父組件中，通過(guò)父組件方法，接收子組件傳遞的數(shù)據(jù)

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

以上是“Angular父子組件間如何進(jìn)行通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Angular父子組件間如何進(jìn)行通信
網(wǎng)站地址：http://bm7419.com/article44/jjsohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站排名、網(wǎng)站制作、外貿(mào)建站、標(biāo)簽優(yōu)化、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容