使用文件替换来替换服务实现

Question

Angular 允许通过 fileReplacements文件替换 > 在 angular.json 中。一个常见的用例是替换文件environment.ts以针对特定构建，例如使用ng build --configuration staging以及configurations中的以下条目angular.json：

"staging": {
  ...,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    }
  ]
}

上面的效果很好，并且它的用例非常清晰。

但是，让我们假设这种情况，我想通过文件替换来替换服务（和其他文件）。一项特定服务的示例：

// service.interface.ts
export interface IService { doSomething(): void; }

// service.mock.ts
@Injectable()
export interface Service implements IService {
  doSomething(): void { throw Error(); }
}

// service.bar.ts
@Injectable()
export interface Service implements IService {
  doSomething(): void { // bar specific implementation }
}

// service.foo.ts
@Injectable()
export interface Service implements IService {
  doSomething(): void { // foo specific implementation }
}

// app.component.ts
import { Service } from './service.mock';
...
export class AppComponent {
  constructor(private service: Service) {
    this.service.doSomething();
  }
}

angular.json 中的 configurations 如下所示：

"foo": {
  ...
  "fileReplacements": [
    {
      "replace": "src/app/service.mock.ts",
      "with": "src/app/service.foo.ts"
    }
  ]
},
"bar": {
  ...
  "fileReplacements": [
    {
      "replace": "src/app/service.mock.ts",
      "with": "src/app/service.bar.ts"
    }
  ]
}

通过使用 ng build --configuration foo 或 ng build --configuration bar< /code> 我现在可以确定通过 AppComponent 中的 this.service.doSomething(); 调用哪个实现 - foo 或 < em>bar 具体一个。长话短说：这个解决方案感觉有点奇怪。请记住，我可能有几个服务采用这种方式，还有路由和其他文件（导致相当长的 fileReplacements）。

我想知道：1.）文件替换是否适用于此用例？ 2.) 是否有任何严重的缺点或缺点？ 3.）有哪些可能的替代方案，或者更确切地说，什么是更像 Angular 的方式（也许类似于依赖注入）？

如果需要更多详细信息，请告诉我。

Answer 1

文件替换的优点是您不会将所有未使用的服务与代码捆绑在一起。如果所有未使用的服务都被捆绑在一起并不困扰您，那么 DI 可能是您的一个很好的解决方案（继续阅读）。

---

您可以将变量添加到环境文件中，然后在 NgModule 中创建一个提供程序。 这是一个工作示例

您将创建 x 个所有服务都将扩展基本服务。然后，该基本服务将具有一些与之关联的抽象数据，甚至可能是您的孩子可以使用的一些方法/属性。

// Some base class
@Injectable({ providedIn: 'root' })
export abstract class Service {
  abstract name: string;
}

// Your foo service
@Injectable({ providedIn: 'root' })
export class FooService extends Service {
  name = 'foo';
}

// Your bar service
@Injectable({ providedIn: 'root' })
export class BarService extends Service {
  name = 'bar';
}

然后，您可以在模块中创建一个提供程序，甚至可以在其他一些提供服务的组件中创建一个提供程序。然后，当您将其注入组件/服务/指令等时，工厂将被执行，并根据您设置的环境变量决定向调用者提供哪个服务。

import { environment } from './environment';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: Service,
      useFactory: (foo: FooService, bar: BarService) => {
        if (environment.somevar === 'mock') {
          throw new Error();
        } else if (environment.somevar === 'foo') {
          return foo;
        } else if (environment.somevar === 'bar') {
          return bar;
        }
      },
      deps: [FooService, BarService]
    },
  ],
})
export class AppModule {}

我们不是在 FooService 或 BarService 上进行 DI 注入，而是在基础服务上进行。创建后将运行工厂并返回正确的类。

export class AppComponent implements OnInit {
  constructor(private readonly myService: Service) { }

  ngOnInit() {
    console.log('Using Service:', this.myService.name);
  }
}