angular service 进行组件通信

最新推荐文章于 2023-02-13 14:52:34 发布

转载最新推荐文章于 2023-02-13 14:52:34 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Godfunc/p/9848713.html

文章标签：

#javascript #ViewUI

本文介绍如何在Angular应用中通过MessageService利用RxJS的Subject进行组件间的消息传递。MessageService作为服务提供者，使用Subject发布消息，发送消息的组件通过调用messageAction方法传递参数，接收消息的组件则通过订阅message$来获取消息。

MessageService 代码如下

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();
  messageAction(name: string) {
    this.messageSource.next(name);
  }
}

发送消息的组件代码如下

import { Component} from '@angular/core';
import { MessageService } from '../service/message.service';
@Component({
  selector: 'app-send',
  templateUrl: './send.component.html',
  styleUrls: ['./send.component.css']
})
export class SendComponent {
  constructor(private messageService: MessageService) { }
  sendMessage(action: string) {
    this.messageService.messageAction(action);
  }

html

<input #action>
<button (click)="sendMessage(action.value)">action</button>

接收消息的组件

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  action: string;
  sub: Subscription;
  ngOnInit(): void {
    this.messageService.message$.subscribe(action => this.action = action);
  }
  ngOnDestroy(): void {
    this.sub.unsubscribe(); //不要忘记取消订阅
  }
  constructor(private messageService: MessageService) {
  }

转载于:https://www.cnblogs.com/Godfunc/p/9848713.html