Angular 4-模块之间的通信-最佳实践

Question

我使用的是Angular 4。

我有两个模块。

模块1是学生有一个名为StudentService的服务，它会调用web api来获取学生成绩

模块2是性能有一个名为PerformanceService的服务，并进行web api调用以获取与性能相关的数据

在模块2中，我需要使用学生的分数(我们已经在模块1中得到了)。

我的问题是，我应该在Student.Component.ts中调用StudentService吗？还是Student.Services.ts？沟通的最佳实践是什么？

Answer 1

实际上没有足够的信息来做出明智的选择。

• 学生组件是否总是在访问性能特征
• 表现真的是学生的一部分吗总是)在检索学生时检索
• 后端服务是否具有将学生和绩效数据一起返回的机制
• 这些功能是如何协同工作的
• 它们是如何在UI中显示的

(所有修辞问题都是为了沉思，不需要你在这里回答。)

出于封装目的，您似乎希望性能服务返回处理性能数据所需的所有数据。因此，如果这包括学生信息，那么该服务应该考虑同时提供这两种信息。

如果学生信息可以是一个"头"，那么也许学生组件应该作为"性能"页面上的嵌套组件可重复使用。然后，学生信息将由嵌套在性能页面中的学生组件提供。

Answer 2

如果只在第二个模块中需要来自服务器的数据，则可以从任何需要的组件调用该方法。否则，如果在两个组件中都需要该数据，则最好只向API请求一次以获取学生数据，没有理由两次获取相同的数据。因此，您可以创建另一个服务来保存数据并在组件之间共享，例如，让我们创建data.service，并想象studentData是一个简单的字符串：

/* imports */
@Injectable()
export class DataService {
public studentData: string;
public setStudentData(studentData: string): void {
this.studentData = studentData;
}
public getStudentData(): string {
return this.studentData;
}
}

在Student.Components中：

/* imports */
/* @Component stuff */
export class StudentComponent {
constructor(
private _studentService: StudentService,
private _dataService: DataService
) {}
this._studentService.yourAPICallMethod()
.then(response => {
// store "response" to "data.service"
this._dataService.setStudentData(response);
}
}

在Performance.Component.ts中，您可以从DataService获取数据，如下所示：

/* imports */
/* @Component stuff */
export class PerformanceComponent {
constructor(
private _dataService: DataService
) {}
// get previously stored "response" from "data.service"
console.log(this._dataService.getStudentData());
}