1. 首頁 > 生活百科 > >

聊聊Angular中組件之間怎么通信

小知識it知識

本篇文章帶大家繼續angular的學習 ， 了解一下Angular中組件通信的方法 ， 希望對大家有所幫助！

聊聊Angular中組件之間怎么通信

文章插圖

【聊聊Angular中組件之間怎么通信】上一篇 ， 我們講了 Angular 結合 NG-ZORRO 快速開發 。 前端開發 ， 很大程度上是組件化開發 ， 永遠離不開組件之間的通信 。 那么 ， 在 Angular 開發中 ， 其組件之間的通信是怎么樣的呢？【相關教程推薦：《angular教程》】
舉一反三 ， Vue 和 React 中大同小異
本文純文字 ， 比較枯燥 。 因為控制臺打印的東西比較雞肋 ， 所以就不配圖了 ， 嗯～希望讀者跟著說明代碼走一遍更容易吸收～
1. 父組件通過屬性傳遞值給子組件相當于你自定義了一個屬性 ， 通過組件的引入 ， 將值傳遞給子組件 。 Show you the CODE 。
<!-- parent.component.html --><app-child [parentProp]="'My kid.'"></app-child>在父組件中調用子組件 ， 這里命名一個 parentProp 的屬性 。
// child.component.tsimport { Component, OnInit, Input } from '@angular/core';@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss']})export class ChildComponent implements OnInit { // 輸入裝飾器 @Input() parentProp!: string; constructor() { } ngOnInit(): void { }}子組件接受父組件傳入的變量 parentProp ， 回填到頁面 。
<!-- child.component.html --><h1>Hello! {{ parentProp }}</h1>2. 子組件通過 Emitter 事件傳遞信息給父組件通過 new EventEmitter() 將子組件的數據傳遞給父組件 。
// child.component.tsimport { Component, OnInit, Output, EventEmitter } from '@angular/core';@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss']})export class ChildComponent implements OnInit { // 輸出裝飾器 @Output() private childSayHi = new EventEmitter() constructor() { } ngOnInit(): void { this.childSayHi.emit('My parents'); }}通過 emit 通知父組件 ， 父組件對事件進行監聽 。
// parent.component.tsimport { Component, OnInit } from '@angular/core';@Component({ selector: 'app-communicate', templateUrl: './communicate.component.html', styleUrls: ['./communicate.component.scss']})export class CommunicateComponent implements OnInit { public msg:string = '' constructor() { } ngOnInit(): void { } fromChild(data: string) { // 這里使用異步 setTimeout(() => { this.msg = data }, 50) }}在父組件中 ， 我們對 child 組件來的數據進行監聽后 ， 這里采用了 setTimeout 的異步操作 。 是因為我們在子組件中初始化后就進行了 emit ， 這里的異步操作是防止 Race Condition 競爭出錯 。
我們還得在組件中添加 fromChild 這個方法 ， 如下：
<!-- parent.component.html --><h1>Hello! {{ msg }}</h1><app-child (childSayHi)="fromChild($event)"></app-child>3. 通過引用 ， 父組件獲取子組件的屬性和方法我們通過操縱引用的方式 ， 獲取子組件對象 ， 然后對其屬性和方法進行訪問 。
我們先設置子組件的演示內容：
// child.component.tsimport { Component, OnInit } from '@angular/core';@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss']})export class ChildComponent implements OnInit { // 子組件的屬性 public childMsg:string = 'Prop: message from child' constructor() { } ngOnInit(): void { } // 子組件方法 public childSayHi(): void { console.log('Method: I am your child.') }}我們在父組件上設置子組件的引用標識 #childComponent：
<!-- parent.component.html --><app-child #childComponent></app-child>之后在 javascript 文件上調用：
import { Component, OnInit, ViewChild } from '@angular/core';import { ChildComponent } from './components/child/child.component';@Component({ selector: 'app-communicate', templateUrl: './communicate.component.html', styleUrls: ['./communicate.component.scss']})export class CommunicateComponent implements OnInit { @ViewChild('childComponent') childComponent!: ChildComponent; constructor() { } ngOnInit(): void { this.getChildPropAndMethod() } getChildPropAndMethod(): void { setTimeout(() => { console.log(this.childComponent.childMsg); // Prop: message from child this.childComponent.childSayHi(); // Method: I am your child. }, 50) }}

推薦閱讀