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”。

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

谢谢

Answer 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.

        });

不要忘记在模块中添加Task Service作为提供程序，并在构造函数中添加Task Service。注入它。在ngOnDestroy（）函数中，您需要按以下代码取消订阅服务。

 this.onTaskValueChange.unsubscribe();

您还可以在项目中的任何位置进行订阅。

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

从角度7的一个组件获取数据

2 个答案: