在组件之间建立通信的任何其他方式 angular 5

Question

我已经建立了以下方式来建立组件之间的通信。

1.@input 和 @output 装饰器（但仅限于父子） 对于兄弟组件

2.使用 getter 和 setter 方法创建服务（但限制是如果我们刷新使用服务数据的页面，数据将变为空）

3.使用cookies（限制：如果我保存一个数组，它会以字符串的形式存储。有时很难取回原始数据类型）

4.使用本地存储

除了这些之外，还有其他方法可以在 2 个组件之间进行通信吗？我已经使用了以上所有内容。建议我更多方法。

5.我使用subject应用了以下方式。但不知道为什么我没有得到输出

服务

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MessageService {
private subject = new Subject<any>();

sendMessage(message: string) {
this.subject.next({ text: message });
 }

clearMessage() {
 this.subject.next();
}

getMessage(): Observable<any> {
 return this.subject.asObservable();
}

}

接收组件

 import { MessageService } from '../services/message.service';
 import { Subscription } from 'rxjs';

export class detailComponent implements OnInit, OnDestroy {

message: any;
subscription: Subscription;
constructor(private messageService: MessageService) {
this.subscription = this.messageService.getMessage().
                        subscribe(message => {
                          this.message = message;
                          console.log("Message");

console.log(this.message);
});
 }

发送组件

import { MessageService } from '../services/message.service';
export class AlertComponent implements OnInit {

sendMessage(): void {
 // send message to subscribers via observable subject
 this.messageService.sendMessage('Message from alert Component to 
 details Component!');
}

clearMessage(): void {
 // clear message
 this.messageService.clearMessage();
}
}

但是这段代码不起作用。

Answer 1

据我所知，您提到了组件之间通信的所有两种方式。您也可以使用路由器参数。如果您使用的是路由。但是可以避免您的第二个参数限制。

2.使用getter和setter方法创建服务（但限制是如果我们刷新使用服务数据的页面，数据将变为空）

为了在刷新子元素后不丢弃数据，可以使用 BehaviorSubject 来发射数据。当你刷新时，它会发出它保存的最后一个数据。

这是这样做的方法，

在你的服务中，首先导入 BehaviorSubject

import { BehaviorSubject } from "rxjs/BehaviorSubject";

然后在服务类中

behaviralSubject = new BehaviorSubject<any[]>(['']); 
exampleBehaviralSubject = this.behaviralSubject.asObservable();

setValues(val: any[]) {

     this.behaviralSubject.next(val);

}

并且在你想要订阅该服务的组件中，

首先实现组件到 OnInit，将你的服务导入为 testService

然后覆盖 ngOnInit()

ngOnInit() {
    testServce.exampleBehaviralSubject.subcribe(
        dataArray => {
            console.log(dataArray)
            // your code goes here 
            }
    )
}

您的第一个值将是 [''] 空字符串数组。然后使用 testService.setValues(dataArray) 发送数据。 这会将数据发送到订阅了 testService 的所有组件，当初始化（或刷新）组件时，behaviralSubject 中的最后一个数据将被发出。

Answer 2

任何其他建立组件间通信的方式

使用管理应用程序状态的工具。

在 Angular 中，最著名的是 NgRx：https://github.com/ngrx/platform。

NgRx 的替代方案是 Akita，它对 Angular 开发人员来说是相当新的：https://github.com/datorama/akita

这些库的灵感主要来自 Redux - 在 ReactJS 世界中非常有名。

Answer 3

您也可以在 Service 中使用 EventEmitter，并在您的组件中使用它来发射和订阅它。

在messaging.service.ts 中声明你的EventEmitter

@Injectable(){
export class MessagingService{

    message : EventEmitter<String> = new EventEmitter<String>();

}

使用这个 EventEmitter 在你的发送组件中发射

发送.component.ts

export class SendingComponent implements OnInit(){
    constructor(private mService : MessageService) {}
    ngOnInit(){
      this.mService.message.emit('This is my message');
    }
}

使用这个 EventEmitter 订阅你的接收组件

 export class ReceiveComponent implements OnInit(){
    constructor(private mService : MessageService) {}
    ngOnInit(){
      this.mService.message.subscribe(message=>{ console.log(message) });
    }
}

Answer 4

您需要一个状态管理库。我强烈推荐秋田。它很简单，并且提供了开箱即用所需的一切，例如实体商店、开发工具、插件等。看看吧：

https://github.com/datorama/akita