получить данные от одного компонента к другому в угловых 7

Question

У меня есть 2 компонента, а именно A и B. Компонент A ловит событие, когда происходит какое-то событие.Я хочу сказать, что это показывает какое-то сообщение как «Задание 1 выполняется».Так что здесь, независимо от того, какое сообщение компонент A показывает то же самое сообщение, я должен показать его на компоненте B. Для этого я написал код примерно так: Здесь, когда я нажимаю кнопку запуска события, он проверяет entry.status.== «In_progress», если это условие соответствует, то в компоненте A я получу сообщение как «Задание 1 выполняется», что-то вроде.Я хочу поймать то же самое сообщение в компоненте B также.Для этого я добавил код, см. Ниже:

componentA.component.ts

tasks(){
this.tasksRes = results['data'];
this.count = 0;
      for (let entry of this.tasksRes) {
        if (entry.status == 'In_progress') {
          this.count = this.count + 1;
        }
      }
}

connect(){
      let source = new EventSource('/api/v1/events/register');
      source.addEventListener('message', message => {
          this.tasks();
      });
  }

componentA.component.html

<ul class="p-0" *ngFor="let task of tasksRes">
<li>
<span class="text-muted">{{task.eventType}}</span>
</li>
<ul>

Приведенный выше код отображает сообщение как «Задание 1 выполняется».

Я пытаюсь также получить «task.eventType» в компоненте B.так как мы можем достичь этого.Как я могу получить такой же статус здесь, в компоненте B тоже.Помощь высоко ценится.

Спасибо

Answer 1

У меня есть очень простой пример службы, подробно описанный в этом сообщении в блоге: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

import { Injectable } from '@angular/core';
@Injectable() 
export class DataService {
  serviceData: string; 
}

Или в Angular v6 +

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
}) 
export class DataService {
  serviceData: string; 
}

Любой компонент может читать или писать вэто свойство.

Вот пример компонента:

import {Component} from '@angular/core'
import { DataService } from './data.service';

@Component({ 
 template: ``, 
}) 
export class A {

  get data():string { 
    return this.dataService.serviceData; 
  } 
  set data(value: string) { 
    this.dataService.serviceData = value; 
  } 

  constructor(public dataService: DataService) { } 
}

Answer 2

Сначала вы должны создать сервис.

export class TaskService  {
  onTaskValueChange: BehaviorSubject<any> = new BehaviorSubject(
    null
  );

  constructor(  ) {}
  taskChange(task: any): void {
    this.onTaskValueChange.next(task);
  }

}

Затем, когда значение задачи изменится, вызвать функцию в компоненте A.

taskService.taskChange(task);

И подписаться на него в компоненте B.

    onTaskValueChange: Subscription;

    this.onTaskValueChange= this.taskService.onTaskValueChange.subscribe(task => {

//Do it something.

        });

Не забудьте добавить службу задач в качестве поставщика в модуль и добавить службу задач в конструкторы.Введите это.В функции ngOnDestroy () необходимо отменить подписку на сервис, как показано в следующем коде.

 this.onTaskValueChange.unsubscribe();

Также вы можете подписаться в любом месте проекта.