聊聊Angular中组件之间怎么通信 _生活百科

本篇文章带大家继续angular的学习，了解一下Angular中组件通信的方法，希望对大家有所帮助！

文章插图

【聊聊Angular中组件之间怎么通信】上一篇，我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在 Angular 开发中，其组件之间的通信是怎么样的呢？【相关教程推荐：《angular教程》】

举一反三， Vue 和 React 中大同小异

本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～
1. 父组件通过属性传递值给子组件相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。 Show you the CODE 。
<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 ，回填到页面。
<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 这个方法，如下：
<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：
<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) }}