angular - 使用 useFactory 提供服务时不会触发 ngOnDestroy

Question

HelloComponent 获取一个 SampleService 实例，定义一个服务提供者。当HelloCompoment被销毁时，我不明白为什么SampleService会存活。

如果 HelloComponent 按类型获得了一个 SampleService 实例(避免使用 ServiceProvider)，则不会出现任何问题。

---

示例服务.ts

@Injectable()
export class SampleService implements OnDestroy{

 constructor(){
   console.log('created new sample service');
 }

 ngOnDestroy(){
  console.log('destroyed sample service');
 }
}

---

你好组件.ts

import { Component, OnInit, OnDestroy } from '@angular/core'
import { SampleService } from '../service/sample.service'

let ServiceFactory = () => {
  console.log('Providing new SampleService');
  return new SampleService();
};

let ServiceProvider = { 
    provide: SampleService,
    useFactory: ServiceFactory
  };

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  providers: [ServiceProvider]
})
export class HelloComponent implements OnInit, OnDestroy {

constructor(private sampleService: SampleService){}

ngOnInit(){
  console.log("Hello component created!")
}

ngOnDestroy(){
  console.log("Hello component destroyed!")
 }
}

这里是 stackblitz:https://stackblitz.com/edit/angular-vkhmma(点击 toggleHello 并查看控制台日志)

如何在组件结束时强制销毁服务？

Answer 1

这是一个 known issue在 Angular 中，但这是(不幸的)设计的。

OnDestroy 回调 Hook 的存在在编译时 被检查，因为您的ServiceProvider 正在包装一个创建 的工厂SampleService，遗憾的是 Angular 编译器甚至不知道这个钩子(Hook)的存在，所以它永远不会被调用。