Question

我正在使用Angular 4。

我有两个模块。

模块1是学生有一个名为StudentService的服务，它会进行网络API调用以获得学生分数

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

在第2单元中，我需要使用学生分数（我们已在模块1中获得）。

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

Answer 1

如果您只需要来自第二个模块的服务器数据，您可以从任何需要它的组件调用该方法。否则，如果您需要两个组件中的数据，最好只向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.Component.ts ：

中

/* 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());
}

Answer 2

没有足够的信息可以做出明智的选择。

学生组件在访问之前是否始终获取数据性能特点？
表演真的是学生的一部分，应该永远（或大多数）总是）在检索学生时检索？
后端服务是否具有将学生和绩效数据一起返回的机制？
这些功能如何协同工作？
它们如何在UI中显示？

（所有修辞问题都是为了考虑而不需要你在这里回答它们。）

出于封装目的，您可能希望Performance服务返回使用Performance数据所需的所有数据。因此，如果包含学生信息，那么该服务应考虑同时提供。

如果学生信息可能是“标题”，那么学生组件可能可以作为“性能”页面上的嵌套组件重复使用。然后学生信息将由嵌套在“性能”页面中的学生组件提供。

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

2 个答案: