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的Factory，因此Angular编译器不幸的是，根本不知道这个钩子甚至存在，因此永远不会调用它。

使用useFactory提供服务时未触发ngOnDestroy

1 个答案: