聊聊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)  }
}
    

这种方法有个限制?，就是子属性的修饰符需要是 public，当是 protected 或者 private 的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：

4. 通过 service 去变动

我们结合 RxJS 来演示。

rxjs 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。

后期会有一篇文章记录 rxjs，敬请期待

我们先来创建一个名为 parent-and-child 的服务。

// parent-and-child.service.tsimport {
 Injectable }
     from '@angular/core';
import {
 BehaviorSubject, Observable }
     from 'rxjs';
 // BehaviorSubject 有实时的作用，获取最新值@Injectable({
  providedIn: 'root'}
)export class ParentAndChildService {
      private subject$: BehaviorSubjectany>
 = new BehaviorSubject(null)  constructor() {
 }
        // 将其变成可观察  getMessage(): Observableany>
 {
    return this.subject$.asObservable()  }
  setMessage(msg: string) {
        this.subject$.next(msg);
  }
}
    

接着，我们在父子组件中引用，它们的信息是共享的。

// parent.component.tsimport {
 Component, OnDestroy, OnInit }
     from '@angular/core';
// 引入服务import {
 ParentAndChildService }
     from 'src/app/services/parent-and-child.service';
import {
 Subject }
 from 'rxjs'import {
 takeUntil }
 from 'rxjs/operators'@Component({
  selector: 'app-communicate',  templateUrl: './communicate.component.html',  styleUrls: ['./communicate.component.scss']}
)export class CommunicateComponent implements OnInit, OnDestroy {
      unsubscribe$: Subjectboolean>
     = new Subject();
  constructor(    private readonly parentAndChildService: ParentAndChildService  ) {
 }
  ngOnInit(): void {
    this.parentAndChildService.getMessage()      .piPE(        takeUntil(this.unsubscribe$)      )      .subscribe({
            next: (msg: any) =>
 {
              console.log('Parent: ' + msg);
           // 刚进来打印 Parent: null          // 一秒后打印 Parent: Jimmy        }
      }
    );
        setTimeout(() =>
 {
          this.parentAndChildService.setMessage('Jimmy');
    }
, 1000)  }
  ngOnDestroy() {
        // 取消订阅    this.unsubscribe$.next(true);
        this.unsubscribe$.complete();
  }
}
    

import {
 Component, OnInit }
     from '@angular/core';
import {
 ParentAndChildService }
     from 'src/app/services/parent-and-child.service';
@Component({
  selector: 'app-child',  templateUrl: './child.component.html',  styleUrls: ['./child.component.scss']}
)export class ChildComponent implements OnInit {
  constructor(    private parentAndChildService: ParentAndChildService  ) {
 }
      // 为了更好理解，这里我移除了父组件的 Subject  ngOnInit(): void {
    this.parentAndChildService.getMessage()      .subscribe({
            next: (msg: any) =>
 {
              console.log('Child: '+msg);
          // 刚进来打印 Child: null          // 一秒后打印 Child: Jimmy        }
      }
)  }
}
    

在父组件中，我们一秒钟之后更改值。所以在父子组件中，一进来就会打印 msg 的初始值 null，然后过了一秒钟之后，就会打印更改的值 Jimmy。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。

【完】

更多编程相关知识，请访问：编程入门！！

以上就是聊聊Angular中组件之间怎么通信的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！