以角度 7 从一个组件获取数据到另一个组件答案

【问题标题】：get the data from one component to other in angular 7以角度 7 从一个组件获取数据到另一个组件
【发布时间】：2018-12-02 21:22:27
【问题描述】：

我有 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>

上面的代码显示消息为“Job 1 running”。

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

谢谢

【问题讨论】：

看看：共享服务
Angular 4 pass data between 2 not related components的可能重复

标签： angular typescript angular7

【解决方案1】：

首先你应该创建服务。

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();

您还可以在项目的任何地方订阅。

【讨论】：

【解决方案2】：

我在这篇博文中有一个非常简单的服务示例：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) { } 
}

【讨论】：