Question

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

1. @input和@output装饰器（但仅限于父级子级） 同级组件

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

3。使用cookie（限制：如果我要保存一个数组，它将以字符串形式存储。有时很难恢复到原始数据类型）

4。使用本地存储

除了这些组件之外，还有其他两种方式可以在2个组件之间进行通信。我已经用完了以上所有内容。向我提出更多建议。

5。我已经使用主题应用了以下方法。但是不知道为什么我没有得到输出

服务

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的所有组件。

Answer 2

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

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

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

NgRx的另一种选择是Akita，它对Angular开发人员来说是很新的：https://github.com/datorama/akita

这些库主要受Redux的启发-Redux在ReactJS世界中非常有名。

Answer 3

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

在messages.service.ts中声明您的EventEmitter

@Injectable(){
export class MessagingService{

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

}

使用此EventEmitter发射您的发送组件

sending.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

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

4 个答案: