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

Question

HelloComponent 获得一个SampleService 实例，定义一个服务提供者。 当HelloCompoment被破坏时，我不明白为什么SampleService会幸存下来。

如果HelloComponent 按类型获得SampleService 实例（避免ServiceProvider），则不会出现问题。

---

sample-service.ts

@Injectable()
export class SampleService implements OnDestroy{

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

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

---

hello-component.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!")
 }
}

这里是堆栈闪电战：https://stackblitz.com/edit/angular-vkhmma （点击toggleHello并查看控制台日志）

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

Answer 1

这是 Angular 中的 known issue，但（不幸的是）是设计的。

在编译时检查OnDestroy回调钩子的存在，并且由于您的ServiceProvider正在包装一个创建SampleService的工厂，不幸的是，Angular编译器不知道这一点hook 甚至存在，所以它永远不会被调用。