在角度7中从一个分量到另一个分量获取数据

Question

我有两个组件，即A和B。当某个事件被触发时，组件A会捕获一个事件。我的意思是说，它显示了一些信息"作业1正在运行"。因此，无论消息是什么，组件A显示的都是相同的消息，我必须在组件B上显示它。为此，我写了这样的代码：在这里，当我单击事件运行按钮时，它将检查条目。状态=="in_progress"，如果此条件匹配，那么在组件A中，我将得到类似"作业1正在运行"的消息。我也想在组件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>

上面的代码显示消息为"Job 1 running"(作业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 Services。在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) { } 
}