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

Angular 组件通信 2023-05-14 21:05:38 176人浏览薄情痞子

摘要

本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～1. 父组件通过属性传递值给子组件相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。Show you the CODE。

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

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

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

<!-- parent.component.html -->

<app-child [parentProp]="'My kid.'"></app-child>

在父组件中调用子组件，这里命名一个 parentProp 的属性。

// child.component.ts

import { 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.ts

import { 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.ts

import { 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.ts

import { 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 的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：

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

4. 通过 service 去变动

我们结合 rxjs 来演示。

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

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

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

// parent-and-child.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有实时的作用，获取最新值

@Injectable({
  providedIn: 'root'
})
export class ParentAndChildService {

  private subject$: BehaviorSubject<any> = new BehaviorSubject(null)

  constructor() { }
  
  // 将其变成可观察
  getMessage(): Observable<any> {
    return this.subject$.asObservable()
  }

  setMessage(msg: string) {
    this.subject$.next(msg);
  }
}

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

// parent.component.ts

import { 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<boolean> = 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组件间进行通信的几种方法的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 带你了解Angular组件间进行通信的几种方法

本文链接: https://www.lsjlt.com/news/206145.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～1. 父组件通过属性传递值给子组件相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。Show you the CODE。...

99+

2023-05-14

Angular 组件通信
Angular组件间进行通信的方法有哪些

这篇“Angular组件间进行通信的方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Angular组件间进行通信的方...

99+

2023-07-04
Angular父子组件间如何进行通信

小编给大家分享一下Angular父子组件间如何进行通信，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！组件通信组件是一个完整独立的...

99+

2024-04-02
Angular中父子组件间如何进行通信

今天就跟大家聊聊有关Angular中父子组件间如何进行通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。通过Input和Ouput传值父组件：htm...

99+

2024-04-02
Vue组件间通信有哪几种方式

这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式？Vue 组件间通信是面试常考的知识点...

99+

2024-04-02
python进程间通信的方法有哪几种

Python进程间通信的方法主要有以下几种：管道（Pipe）：使用multiprocessing模块中的Pipe()函数创建管...

99+

2024-04-09

python
vue中组件之间相互通信传值的几种方法详解

目录vue中组件之间相互通讯传值的方式1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现2、父组件主动获取子组件数据3、使用provide/inject方法实现4、使用事...

99+

2024-04-02
Vue实现组件间通信的几种方式(多种场景)

目录1、Props 父 >>> 子（Props）子 >>> 父（$emit）2、Bus事件总线3、V...

99+

2024-04-02
vue兄弟组件间怎么进行通信？方法详解

Vue.js 是一款渐进式 JavaScript 框架，它的响应式系统和组件化架构使得它在 Web 开发中越来越受欢迎。近来，很多开发者在使用 Vue.js 时遇到了兄弟组件间通信的问题，本文将介绍如何使用 Vue.js 的兄弟组件方法解决...

99+

2023-05-14
linux进程间的通信方式有哪几种

这篇文章主要介绍“linux进程间的通信方式有哪几种”，在日常操作中，相信很多人在linux进程间的通信方式有哪几种问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”linux进程间的通信方式有哪几种”的疑惑有所...

99+

2023-06-20
vue组件间传值的方法你知道几种

目录一丶父子组件传值二丶子父组件传值三丶兄弟组件传值四丶$parent /$children与ref总结一丶父子组件传值先在父组件中给子组件的自定义属性绑定一个父组件的变量 &l...

99+

2024-04-02
Angular组件间进行交互的方法有哪些

本篇内容介绍了“Angular组件间进行交互的方法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、...

99+

2024-04-02
Angular中组件间通讯的实现方法

这篇文章主要介绍Angular中组件间通讯的实现方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Angular 组件间的通讯组件间三种典型关系：父好组件之间的交互（@Input/@Output/模板变量/@View...

99+

2023-06-14
vue组件通信的多种方法详解

目录1. 父传子2. 子传父3. 非父子组件传值4. vuex5. refs6. $children7. $parent8. provide & inject9. $attr...

99+

2024-04-02
Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...

99+

2024-04-02
深入了解Vue组件七种通信方式

目录1.props/$emit简介代码实例2.v-slot简介代码实例3.$refs/ $parent/$children/$root简介代码实例4.$attrs/$listener...

99+

2024-04-02
React组件间通信的三种方法（简单易用）

目录一、父子组件通信二、跨级组件通信1、逐层传值2、跨级传值三、兄弟（无嵌套）组件通信四、路由传值五、Redux React知识中一个主要内容便是组件之间的通信，以下列举...

99+

2024-04-02
Vue组件间通信的实现方法讲解

目录前言一、vuex是什么二、vuex的使用三、四个重要的映射函数四、多组件数据共享五、模块化使用vuex前言前面介绍过几种可以实现组件间通信的方式props、ref、自定义事件绑...

99+

2023-01-09

Vue组件间通信 Vue组件通信 Vue组件数据共享
VUE父子组件通信的七宗罪：你犯了几个？

父子组件通信是VUE开发中经常遇到的问题，本文将列举常见的七种错误，帮助大家避免陷入陷阱。在父组件中直接操作子组件的data <template> <div> <child-compone...

99+

2024-02-07

VUE 父子组件 Props Events Vuex $ref .$attrs
vue3组件通信的几种方式分别是这样的

vue3组件通信的几种方式分别是这样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。vue3组件通信方式为以下几种props$emit$expose / ref$attrsv-...

99+

2023-06-22