Angular 工厂总是调用两次

typescript

在使用 Angular 进行开发时，有时会遇到工厂函数被调用两次的情况。这种情况可能会导致一些不可预料的问题，因此我们需要了解为什么会出现这种情况以及如何解决它。

首先，我们需要了解 Angular 中的工厂函数是什么。工厂函数是 Angular 中用来创建服务实例的函数。当我们在应用程序中请求一个服务时，Angular 会使用工厂函数来创建该服务的实例。这样的设计模式可以帮助我们管理和组织代码，提高代码的可维护性和可重用性。

然而，有时我们会发现工厂函数被调用两次的情况。这可能是由于 Angular 的依赖注入机制造成的。当我们在应用程序中请求一个服务时，Angular 会检查该服务是否已经创建过实例。如果已经创建过实例，Angular 会直接返回该实例而不会再次调用工厂函数。但是，在某些情况下，Angular 可能会错误地认为该服务还没有创建过实例，从而导致工厂函数被调用两次。

案例代码：

假设我们有一个名为 DataService 的服务，它用来获取和处理数据。我们可以通过以下方式定义该服务和工厂函数：

typescript
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() {
    console.log('DataService constructor');
  }
  getData() {
    console.log('Getting data...');
    // 获取数据的逻辑
  }
}
export function dataServiceFactory() {
  console.log('dataServiceFactory');
  return new DataService();
}

在上面的代码中，我们首先定义了 DataService 服务，并使用 @Injectable 装饰器将其标记为可注入的。然后，我们定义了一个名为 dataServiceFactory 的工厂函数，它会返回一个 DataService 的实例。

接下来，我们需要在应用程序的模块中注册该服务：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService, dataServiceFactory } from './data.service';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: DataService,
      useFactory: dataServiceFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在上面的代码中，我们使用 providers 数组将 DataService 注册为一个提供者，并将工厂函数 dataServiceFactory 指定为创建该服务实例的方式。

然而，当我们运行应用程序并查看开发者工具的控制台输出时，我们可能会发现 dataServiceFactory 和 DataService constructor 这两条日志被打印了两次。这表明工厂函数被调用了两次，而不是我们期望的一次。

解决工厂函数被调用两次的问题

为了解决工厂函数被调用两次的问题，我们可以使用 Angular 提供的 ??inject 函数来手动进行依赖注入。这个函数可以确保每次请求服务时都返回同一个实例，而不会多次调用工厂函数。

我们可以将工厂函数修改如下：

typescript
export function dataServiceFactory(injector: Injector) {
  console.log('dataServiceFactory');
  return injector.get(DataService);
}

然后，在模块的提供者配置中使用 useFactory 属性来指定工厂函数：

typescript
providers: [
  {
    provide: DataService,
    useFactory: dataServiceFactory,
    deps: [Injector]
  }
],

这样，当我们再次运行应用程序时，我们会发现 dataServiceFactory 和 DataService constructor 这两条日志只被打印了一次，工厂函数不再被调用两次。

在本文中，我们讨论了 Angular 中工厂函数被调用两次的问题，并提供了解决这个问题的方法。我们了解了工厂函数是用来创建服务实例的函数，并通过一个案例代码演示了工厂函数被调用两次的场景以及如何使用 ??inject 函数解决这个问题。通过正确地处理工厂函数的调用，我们可以避免一些潜在的问题，提高我们应用程序的性能和稳定性。