Angular 5中服务的生命周期是什么

时间:2018-04-27 06:23:26

标签: angular lifecycle angular-services

Angular 5

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

编辑:为了澄清,这是关于组件生命周期的 NOT 问题。这个问题是关于服务的生命周期。如果服务没有生命周期,那么组件和服务之间的数据流如何管理?

4 个答案:

答案 0 :(得分:15)

服务可以有2个范围。

如果在模块上声明了service,则为所有人共享相同的实例,这意味着将在创建需要它的第一个组件/ directive / service / Pipe时构建服务。然后,当模块本身被销毁时(大部分时间是卸载页面),它将被销毁。

如果在Component / Directive / Pipe上声明服务,则每次创建Component / Directive / Pipe时都会创建1个实例,并在相关的Component / Directive / Pipe被销毁时销毁。

You can see it in action

代码测试:提供2个服务,用于显示何时创建/销毁它们。

@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生命周期挂钩。

答案 1 :(得分:0)

服务仅存在于其提供者的范围内,因此在模块或单个组件的范围内。它们在第一次注入时被实例化,只要提供者存在就保持活着。

由于服务是普通类,因此角度生命周期钩子不适用于它们。

答案 2 :(得分:0)

OnDestroy 适用于官方文档中提到的服务:https://angular.io/api/core/OnDestroy

引用:

<块引用>

当指令、管道或服务被销毁时调用的生命周期钩子。用于在销毁实例时需要进行的任何自定义清理。

答案 3 :(得分:-3)

服务就像Angular中具有@Injectable元数据的组件一样,所以服务的生命周期挂钩基本上类似于Angular中的组件生命周期。到目前为止我还没有尝试,但我假设您可以调用所有方法/钩子,如ngOnInit ngOnDestroy等。

在Angular中,所有生命周期钩子都是作为框架变更检测的一部分触发的。

详细信息,请参阅此处的官方文档