Angular 从角度7中的一个组件到另一个组件获取数据

我有两个组件，即A和B。组件A在触发某个事件时捕获一个事件。我的意思是，它显示了一些消息，如“作业1正在运行”。因此，在这里，无论组件A显示的是什么消息，我都必须在组件B上显示它。为此，我编写了如下代码：在这里，当我单击事件运行按钮时，它将检查条目。状态=='in_progress'，如果此条件匹配，那么在组件A中，我将得到消息“Job 1 is running”差不多。我还想在组件B中捕获相同的消息。为此，我添加了一些代码，请参见以下内容：

组件a.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>

{{task.eventType}

上述代码将消息显示为“作业1正在运行”

我也在尝试获取组件B中的“task.eventType”。那么，我们如何才能实现这一目标呢。我如何在组件B中也获得相同的状态。非常感谢您的帮助

---

谢谢

首先您应该创建服务

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

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

}

并在B组件中订阅它

taskService.taskChange(task);

    onTaskValueChange: Subscription;

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

//Do it something.

        });

不要忘记在模块中添加任务服务作为提供者，在构造函数中添加任务服务。注射它。在ngondestory（）函数中，您需要按以下代码取消订阅服务

 this.onTaskValueChange.unsubscribe();

---

你也可以在项目的任何地方订阅

首先，您应该创建服务

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

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

}

并在B组件中订阅它

taskService.taskChange(task);

    onTaskValueChange: Subscription;

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

//Do it something.

        });

不要忘记在模块中添加任务服务作为提供者，在构造函数中添加任务服务。注射它。在ngondestory（）函数中，您需要按以下代码取消订阅服务

 this.onTaskValueChange.unsubscribe();

---

你也可以在项目的任何地方订阅

我在这篇博文中有一个非常简单的服务示例：

或者在角度上+

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) { } 
}

---

我在这篇博文中有一个非常简单的服务示例：

或者在角度上+

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) { } 
}

---

查看：共享服务可能重复的查看：共享服务可能重复的