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

这种方法有个限制? ，就是子属性的修饰符需要是 public ，当是 protected 或者 private 的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：
类型使用范围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$: BehaviorSubject<any> = new BehaviorSubject(null) constructor() { } // 将其变成可观察 getMessage(): Observable<any> { 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<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中组件之间怎么通信的详细内容，更多请关注电脑自学网其它相关文章！