天天快看:带你了解Angular组件间进行通信的几种方法

时间:2022-12-26 20:08:44       来源:转载
Angular组件间怎么通信?下面本篇文章带大家了解一下Angular中组件通信的方法,希望对大家有所帮助!

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


【资料图】

本文纯文字,比较枯燥。因为控制台打印的东西比较鸡肋,所以就不配图了,嗯~希望读者跟着说明代码走一遍更容易吸收~

1. 父组件通过属性传递值给子组件

相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE

登录后复制

在父组件中调用子组件,这里命名一个 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,回填到页面。

Hello! {{ parentProp }}

登录后复制

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这个方法,如下:

Hello! {{ msg }}

登录后复制

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

登录后复制

之后在 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的时候,会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下:

类型使用范围
public允许在累的内外被调用,作用范围最广
protected允许在类内以及继承的子类中使用,作用范围适中
private允许在类内部中使用,作用范围最窄

4. 通过 service 去变动

我们结合 rxjs来演示。

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

我们先来创建一个名为 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$: BehaviorSubject = new BehaviorSubject(null)  constructor() { }    // 将其变成可观察  getMessage(): Observable {    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$: Subject = 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组件间进行通信的几种方法的详细内容,更多请关注php中文网其它相关文章!

关键词: 作用范围 带你了解