2017-10-16 62 views
2

我正在使用Angular 4.Angular 4 - 模块之间的通信 - 最佳实践

我有两个模块。

模块1 学生有一个名为StudentService服务,这使得网络API调用来获得学生的成绩

模块2 性能有一个叫做PerformanceService服务,使网络API调用来获取相关数据性能

在模块2中,我需要使用学生分数(我们已经在模块1中获得)。

我的问题是,我应该在Student.Component.ts中调用StudentService吗?或Student.Service.ts?沟通的最佳实践是什么?

+0

如果学生分数从StudenService获得,请在Module2中注入这两个服务 – Eliseo

回答

1

没有足够的信息来作出明智的选择。

  • 学生组件是否总是在访问 性能特征之前获取数据?
  • 性能真的是学生的一部分,应该始终(或大多数 总是)检索学生时被检索?
  • 后端服务是否有机制将学生和成绩数据一起返回?
  • 功能如何一起工作?
  • 它们如何显示在UI中?

(专供沉思所有反问不需要你在这里回答这些问题。)

这似乎为您希望您的性能服务来回报所有与绩效工作所需的数据封装用途数据。因此,如果包括学生信息,那么该服务应考虑提供两者。

如果学生信息可能是“标题”,那么也许学生组件应该可重用为性能页面上的嵌套组件。然后,Student信息将由嵌套在Performance页面中的Student组件提供。

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