Каков жизненный цикл сервиса в Angular 5 - PullRequest
Новая
       11

Каков жизненный цикл сервиса в Angular 5

0 голосов
/ 27 апреля 2018

Угловой 5

Когда служба создается и уничтожается, каковы ее ловушки жизненного цикла (если таковые имеются) и как ее данные распределяются между компонентами?

РЕДАКТИРОВАТЬ : Чтобы уточнить, это НЕ вопрос о жизненном цикле компонентов. Этот вопрос касается жизненного цикла услуг. Если у службы нет жизненного цикла, как управляется поток данных между компонентами и службами?

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Сервисы живут только в рамках своих провайдеров, то есть в рамках модуля или отдельного компонента. Они создаются при первой инъекции и сохраняются живыми, пока существует поставщик.

Поскольку сервисы являются обычными классами, к ним не применяются ловушки жизненного цикла angulars.

0 голосов
/ 27 апреля 2018

Сервис может иметь 2 области действия.

Если сервис объявлен в вашем модуле, у вас один и тот же экземпляр для всех, это означает, что сервис будет создан, когда будет создан первый компонент / директива / сервис / канал, которому он нужен. Затем он будет уничтожен, когда сам модуль будет уничтожен (большую часть времени, когда страница выгружается)

если служба объявлена ​​в Компоненте / Директиве / Трубе, то 1 экземпляр будет создаваться каждый раз, когда Компонент / Директива / Труба будет создаваться и уничтожаться при уничтожении соответствующего Компонента / Директивы / Трубы.

Вы можете увидеть это в действии

Тестирование кода: 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 крючок жизненного цикла.

...