Angular 5
服务何时创建和销毁?它有哪些生命周期钩子(如果有的话)?数据是如何在组件之间共享的?
编辑:为了澄清,这不是一个关于组件生命周期的问题。这个问题是关于服务生命周期的。如果一个服务没有生命周期, 那么组件和服务之间的数据流如何管理?
Angular 5
服务何时创建和销毁?它有哪些生命周期钩子(如果有的话)?数据是如何在组件之间共享的?
编辑:为了澄清,这不是一个关于组件生命周期的问题。这个问题是关于服务生命周期的。如果一个服务没有生命周期, 那么组件和服务之间的数据流如何管理?
服务可以有两个作用域。
如果服务在你的模块中声明,那么你将拥有相同的实例,这意味着当第一个需要它的组件/指令/服务/管道被创建时,服务将会构造。然后当模块本身被销毁时(大多数情况下是页面卸载时),它也将被销毁。
如果服务在组件/指令/管道上声明,则每次创建组件/指令/管道时都将创建一个单独的实例,并在相关组件/指令/管道被销毁时销毁。
代码测试:创建了两个服务以展示它们何时被创建/销毁。
@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');
}
}
正如您所看到的,在Angular中,Service
可以具有 OnDestroy
生命周期钩子。
OnDestroy
适用于服务,如官方文档所述:https://angular.io/api/core/OnDestroy
引用:
当指令、管道或服务被销毁时调用的生命周期钩子。用于任何需要在实例销毁时进行的自定义清理。