Angular-组件间异步通信
Angular中实现组件间异步通信的方法有很多，我们可以使用RxJS Observables、Subject或者Service等。以下是第一种方法的示例代码：
- 步骤一：创建一个service，该service用于在组件间传递消息。 import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs';
@Injectable()
export class MessageService{
private subject = new Subject
sendMessage(message: string){ this.subject.next({ text: message }); }
clearMessage(){ this.subject.next(); }
getMessage(): Observable
- 步骤二：在发送组件中调用该service并发送消息。 import { Component } from '@angular/core'; import { MessageService } from './message.service';
@Component({
selector: 'app-sender',
template:
})
export class SenderComponent {
constructor(private messageService: MessageService) { }
sendMessage(): void { this.messageService.sendMessage('Message from Sender Component to Receiver Component!'); } }
- 步骤三：在接收组件中订阅消息来接收消息。 import { Component, OnInit } from '@angular/core'; import { MessageService } from './message.service';
@Component({
selector: 'app-receiver',
template:
})
export class ReceiverComponent implements OnInit {
messages: any[] = [];
constructor(private messageService: MessageService) { }
ngOnInit() { this.messageService.getMessage().subscribe((message) => { if (message) { this.messages.push(message); } else { this.messages = []; } }); }
}
通过以上步骤，我们就可以实现两个组件之间的异步通信。
上一篇：Angular-组合验证不起作用