Angular中实现组件间异步通信的方法有很多,我们可以使用RxJS Observables、Subject或者Service等。以下是第一种方法的示例代码:
@Injectable()
export class MessageService{
private subject = new Subject
sendMessage(message: string){ this.subject.next({ text: message }); }
clearMessage(){ this.subject.next(); }
getMessage(): Observable
@Component({
selector: 'app-sender',
template:
})
export class SenderComponent {
constructor(private messageService: MessageService) { }
sendMessage(): void { this.messageService.sendMessage('Message from Sender Component to Receiver Component!'); } }
@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-组合验证不起作用