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

问题描述

Angular 5

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

编辑:为明确起见，这不是有关组件生命周期的问题.这个问题是关于服务的生命周期的.如果服务没有生命周期，那么如何管理组件和服务之间的数据流?

解决方案

服务可以有2个作用域.

如果在模块上声明了service，则您具有共享给所有实例的实例，这意味着将在创建需要该服务的第一个组件/指令/service/Pipe时构造该服务.然后会在销毁模块本身时销毁销毁销钉(大部分时间是在页面被卸载时)

如果在组件/指令/管道上声明了该服务，则每次创建组件/指令/管道时都会创建1个实例，并在销毁相关的组件/指令/管道时破坏1个实例.

您可以在运行中看到它

代码测试:提供了两种服务来显示它们的创建/销毁时间.

@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 { }

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

@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');
  }
}

如您所见，角的Service可以具有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屋！