Angular 5 中服务的生命周期是什么 [英] What is the lifecycle of a service in Angular 5

问题描述

Angular 5

服务何时创建和销毁，它的生命周期钩子是什么(如果有)以及它的数据如何在组件之间共享?

编辑:澄清一下，这不是一个关于组件生命周期的问题.这个问题是关于服务的生命周期的.如果服务没有生命周期，如何管理组件和服务之间的数据流?

解决方案

Service 可以有 2 个作用域.

如果在您的模块上声明了服务，则您将共享相同的实例，这意味着将在创建第一个需要它的组件/指令/服务/管道时构造服务.然后当Module自身被销毁时(大部分是页面卸载时)会被销毁

如果服务声明在Component/Directive/Pipe上，那么每次创建Component/Directive/Pipe时都会创建1个实例，销毁相关Component/Directive/Pipe时会销毁1个实例.

你可以看到它的实际效果

代码测试:2个服务用于显示何时创建/销毁.

@NgModule({provider: [GlobalService]//这意味着lifeCycle与Module相关，整个module只创建一个实例.只有当第一个需要它的元素被创建时，它才会被创建.})导出类 AppModule { }

第二个服务是一个本地组件服务，将为每个创建的 hello-component 实例创建，并在 hello-component 被销毁之前被销毁.

@Injectable()导出类 LocalService 实现 OnDestroy{构造函数(){console.log('localService 已构建');}ngOnDestroy() {console.log('localService 被销毁');}}@成分({选择器:'你好'，模板:`<h1>你好{{name}}！</h1>`，样式:[`h1 { 字体系列:拉托；}`]，提供者:[LocalService]})导出类 HelloComponent 实现 OnInit, OnDestroy {@Input() 名称:字符串；构造函数(私有 localService:LocalService，私有 globalService:GlobalService){}ngOnInit(){console.log('hello 组件初始化');}ngOnDestroy() {console.log('hello 组件被销毁');}}

如你所见，Service在angular中可以有OnDestroy生命周期钩子.

Angular 5

When is a service created and destroyed, what are its lifecycle hooks (if any) and how is its data shared between components?

EDIT: To clarify, this is NOT a question about the lifecycle of components. This question is about the lifecycle of services. In case a service does not have a lifecycle, how is the flow of data between components and services managed?

解决方案

Service can have 2 scopes.

If service is declared on your module, you have same instance shared for all, this means service will be constructed when the first component/directive/service/Pipe who needs it will be created. Then it will be destroyed when Module itself will be destroyed (most of the time when page is unloaded)

if the service is declared on Component/Directive/Pipe, then 1 instance will be created each time when Component/Directive/Pipe will be created and destroyed when related Component/Directive/Pipe will be destroyed.

You can see it in action

Code testing : 2 services are made for showing when they are created/destroyed.

@NgModule({
  providers: [GlobalService] // This means lifeCycle is related to the Module, and only one instance is created for the whole module. It will be created only when the first element who needs it will be created.
})
export class AppModule { }

Second service is a local component service and will be create for each hello-component instance created, and will be destroyed just before hello-component will be destroyed.

@Injectable()
export class LocalService implements OnDestroy{
  constructor() {
    console.log('localService is constructed');
  }

  ngOnDestroy() {
    console.log('localService is destroyed');
  }
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [LocalService]
})
export class HelloComponent implements OnInit, OnDestroy {
  @Input() name: string;

  constructor(private localService: LocalService, private globalService: GlobalService) {}

  ngOnInit(){
    console.log('hello component initialized');
  }

  ngOnDestroy() {
    console.log('hello component destroyed');
  }
}

As you can see, Service in angular can have OnDestroy life cycle hook.

这篇关于Angular 5 中服务的生命周期是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！