温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angular中组件之间如何通信

发布时间:2022-04-24 11:03:04 来源:亿速云 阅读:151 作者:iii 栏目:web开发

本文小编为大家详细介绍“Angular中组件之间如何通信”,内容详细,步骤清晰,细节处理妥当,希望这篇“Angular中组件之间如何通信”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

Angular中组件之间如何通信

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 -->

<h2>Hello! {{ parentProp }}</h2>

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 -->

<h2>Hello! {{ msg }}</h2>
<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中组件之间如何通信”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI