我应该在其构造函数中还是在 app.component 的 ngOnInit 方法中初始化 Angular 服务?
Should I initialise an Angular service in its constructor or in the ngOnInit method of the app.component?
我是 Angular 的新手。我有一项服务需要订阅另一项服务提供的主题。如果这是一个组件,我会在组件的 ngOnInit 方法中创建订阅。不过,服务不会调用 NgOnInit。我已经创建了一个初始化方法来创建订阅,但我不确定从哪里调用它最好。我已经看到它以两种方式完成:
1) 在服务构造函数中调用初始化方法
2) 将服务注入 app.component 并在 app.component 的 ngOnInit 方法中调用服务初始化方法,例如
方法一:
export class MyService{
constructor(private myRequiredService: RequiredService) {
this.initialiseSubs();
}
initaliseSubs(){
//code to set up subscriptions
}
}
方法二
export class MyService{
constructor(private myRequiredService: RequiredService) {}
initaliseSubs(){
//code to set up subscriptions
}
}
export class AppComponent implements OnInit{
title = 'my-app';
constructor(private myService:MyService){}
ngOnInit(){
this.myService.initialiseSubs();
}
}
这两种方法似乎都有效,但我欢迎就哪种方法更可取提出建议。提前致谢。
服务是您定义可观察对象的地方,例如getAllEmployees()
。组件是您使用这些服务的地方;例如通过将它们注入构造函数)。
export class MyService{
constructor(private myRequiredService: RequiredService) {}
getAllEmployees():Observable<Employee[]>{
// return Observables of type Employee[]
}
}
假设现在您有一个名为 EmployeesList
的组件,它负责显示所有员工数据。首先,您需要将服务注入到构造函数中。接下来,您调用 getAllEmployees
服务方法并订阅以生成结果“aka 数据”。
import { Component, OnInit } from '@angular/core';
export class EmployeesList implements OnInit{
private employees: Employee[];
constructor(private myService:MyService){}
ngOnInit(): void{
// it's better to do the subscription inside ngOnInit.
this.myService.getAllEmployees().subscribe(
employees => {
this.employees = employees;
}
);
}
}
这基本上就是您应该做的。但是,为了更好的开发和用户体验,我建议使用 angular resolvers
。解析器基本上是可以附加到特定路由的方法,angular 将在渲染组件之前调用它们。
但这被认为是一个高级主题,除非你问我,否则我不会 post 任何代码。
如果回答对您有帮助,请标为正确。
祝一切顺利!
编辑
在下面的评论中讨论后,我了解到您有不同的后端可以根据当前路由进行通信,我会这样处理这种情况:
// inside the component
constructor(private router: Router) {}
ngOnInit(){
// You need to find
this.myService.getAllEmployees(this.router.url).subscribe(
employees => {
this.employees = employees;
}
);
}
// inside the service file:
export class MyService{
constructor(private myRequiredService: RequiredService) {}
getAllEmployees(URL: string):Observable<Employee[]>{
// decide which back-end to connect with depending on the URL
switch(url){
case "example1":
URL = "url1";
break;
case "example2":
URL = "url2";
break;
}
// Connect to the resource using URL param
// return Observables of type Employee[]
}
}
我是 Angular 的新手。我有一项服务需要订阅另一项服务提供的主题。如果这是一个组件,我会在组件的 ngOnInit 方法中创建订阅。不过,服务不会调用 NgOnInit。我已经创建了一个初始化方法来创建订阅,但我不确定从哪里调用它最好。我已经看到它以两种方式完成:
1) 在服务构造函数中调用初始化方法
2) 将服务注入 app.component 并在 app.component 的 ngOnInit 方法中调用服务初始化方法,例如
方法一:
export class MyService{
constructor(private myRequiredService: RequiredService) {
this.initialiseSubs();
}
initaliseSubs(){
//code to set up subscriptions
}
}
方法二
export class MyService{
constructor(private myRequiredService: RequiredService) {}
initaliseSubs(){
//code to set up subscriptions
}
}
export class AppComponent implements OnInit{
title = 'my-app';
constructor(private myService:MyService){}
ngOnInit(){
this.myService.initialiseSubs();
}
}
这两种方法似乎都有效,但我欢迎就哪种方法更可取提出建议。提前致谢。
服务是您定义可观察对象的地方,例如getAllEmployees()
。组件是您使用这些服务的地方;例如通过将它们注入构造函数)。
export class MyService{
constructor(private myRequiredService: RequiredService) {}
getAllEmployees():Observable<Employee[]>{
// return Observables of type Employee[]
}
}
假设现在您有一个名为 EmployeesList
的组件,它负责显示所有员工数据。首先,您需要将服务注入到构造函数中。接下来,您调用 getAllEmployees
服务方法并订阅以生成结果“aka 数据”。
import { Component, OnInit } from '@angular/core';
export class EmployeesList implements OnInit{
private employees: Employee[];
constructor(private myService:MyService){}
ngOnInit(): void{
// it's better to do the subscription inside ngOnInit.
this.myService.getAllEmployees().subscribe(
employees => {
this.employees = employees;
}
);
}
}
这基本上就是您应该做的。但是,为了更好的开发和用户体验,我建议使用 angular resolvers
。解析器基本上是可以附加到特定路由的方法,angular 将在渲染组件之前调用它们。
但这被认为是一个高级主题,除非你问我,否则我不会 post 任何代码。
如果回答对您有帮助,请标为正确。 祝一切顺利!
编辑 在下面的评论中讨论后,我了解到您有不同的后端可以根据当前路由进行通信,我会这样处理这种情况:
// inside the component
constructor(private router: Router) {}
ngOnInit(){
// You need to find
this.myService.getAllEmployees(this.router.url).subscribe(
employees => {
this.employees = employees;
}
);
}
// inside the service file:
export class MyService{
constructor(private myRequiredService: RequiredService) {}
getAllEmployees(URL: string):Observable<Employee[]>{
// decide which back-end to connect with depending on the URL
switch(url){
case "example1":
URL = "url1";
break;
case "example2":
URL = "url2";
break;
}
// Connect to the resource using URL param
// return Observables of type Employee[]
}
}