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

У меня есть 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. Помощь высоко ценится.

Спасибо


typescript angular angular7
person youi    schedule 30.11.2018    source источник
comment
Взгляните на: Общий сервис   -  person Prashant Pimpale    schedule 30.11.2018
comment
Возможный дубликат Angular 4 передает данные между двумя несвязанными компонентами   -  person Sangwin Gawande    schedule 30.11.2018

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, вы должны создать сервис.

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.

        });

Не забудьте добавить Task Service в качестве провайдера в модуль и добавить Task Service в конструкторы. Введите его. В функции ngOnDestroy() вам необходимо отказаться от подписки на услугу, как показано ниже.

 this.onTaskValueChange.unsubscribe();

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

person OfficalMesut    schedule 30.11.2018

arrow_upward
1
arrow_downward

У меня есть очень простой пример службы, подробно описанной в этом сообщении блога: 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) { } 
}
person DeborahK    schedule 30.11.2018