本篇文章帶大家了解一下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() 属性名称 = new EventEmitter()
元件中，建立事件物件
子元件中，透過事件物件的emit方法發佈訊息，參數就是傳遞的資料
第六步 在父元件中，透過父元件方法，接收子元件傳遞的資料 以上是淺談Angular父子組件間怎麼進行通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！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'
})
}
}
