Любой другой способ установить связь между компонентами угловой 5

Question

Я установил следующие способы создания связи между компонентами.

1.@input и @output decorator (но только родительский дочерний элемент) для компонентов-братьев и сестер

2. создание службы с использованием метода получения и установки (но ограничение заключается в том, что при обновлении страницы, на которой мы используем данные из службы, данные станут пустыми)

3.использование файлов cookie (ограничения: если я сохраняю массив, он сохраняется в виде строк. Иногда становится трудно вернуть исходный тип данных)

4.using localstorage

Существуют ли другие способы связи между двумя компонентами, кроме этих.Я уже использовал все вышеперечисленное.Предложите мне еще способы.

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

Вам нужна библиотека управления состоянием.Я очень рекомендую Акиту.Это просто и поставляется со всем необходимым из коробки, например, хранилищем сущностей, dev-tools, плагинами и многим другим.Проверьте это:

https://github.com/datorama/akita

Answer 2

Как я знаю, вы упомянули все 2 способа связи между компонентами.Также вы можете использовать параметры маршрутизатора.если вы используете маршрутизацию.Но ваших ограничений второго аргумента можно избежать.

2.создание службы с помощью метода получения и установки (но ограничение заключается в том, что если мы обновим страницу, на которой мы используем данные из службы, данные станут пустыми)

Чтобы не сбрасывать данные после обновления дочернего элемента, вы можете использовать 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 
            }
    )
}

ваше первое значение будет [''] пустым массивом String.затем используйте testService.setValues ​​(dataArray) для отправки данных.это отправит данные всем компонентам, которые подписаны на testService, при инициализации (или обновлении) компонента будут отправлены последние данные в высоком уровне поведения.

Answer 3

Любой другой способ установления связи между компонентами

Использование инструмента для управления состоянием приложения.

В Angular наиболее известным является NgRx: https://github.com/ngrx/platform.

Альтернативой для NgRx является Akita, которая является довольно новой для разработчика Angular: https://github.com/datorama/akita

Эти библиотеки в основном вдохновлены Redux - который очень известен в мире ReactJS.

Answer 4

Вы также можете использовать EventEmitter в Сервисе и использовать его в своих компонентах для отправки и подписки на него.

Объявите свой EventEmitter в messaging.service.ts

@Injectable(){
export class MessagingService{

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

}

Используйте этот EventEmitterдля отправки в отправляющем компоненте

send.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) });
    }
}