Question

如果我的角色模块A取决于某个服务S。但是，我没有直接实现服务，而是希望处理接口I并让A的使用者在导入时传递实际的实现。实现将是一个用@Injectable修饰的Angular服务，并且有自己的依赖项。

在Angular中可行吗？如果是，实施它的步骤是什么？

Answer 1

要归档此内容，您可以使用interfaces代替app/ ├── foo.service.ts ├── foo/ │ ├── abstract-foo.provider.ts │ ├── foo.module.ts │ ├── foo.component.ts ├── app.module.ts来实现可交换的实现：

// foo.service.ts
@Injectable()
export class FooService extends AbstractFooProvider {
   ctor(private _fooDependency: SomeOtherFooService){}
   foo(): boolean {
     return this._fooDependency.isFoo();
   }
}

// foo.module.ts
@NgModule({
  declarations: [FooComponent],
  exports: [FooComponent]
})
export class FooModule {
   static withConfiguration(implementationProvider: Provider): ModuleWithProviders {
     return {
        ngModule: FooModule,
        providers: [implementationProvider]
     };
   }
}

// abstract-foo.provider.ts
export abstract class AbstractFooProvider {
    foo(): boolean;
}

// foo.component.ts
@Component({})
export class FooComponent {
   ctor(private _fooProvider: AbstractFooProvider){}
}

// app.module.ts    

export const FOO_PROVIDER : ClassProvider = {
  provide: AbstractFooProvider, 
  useClass: FooService
};

@NgModule({
   imports: [
      FooModule.withConfiguration(FOO_PROVIDER)
   ]
})
export class AppModule {}

现在有以下文件：

import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import main from './src/codes/main';


class app extends Component{

  render(){
    return <main/>;
  }

}


AppRegistry.registerComponent('app', () => app);

Answer 2

您可以使用InjectionToken：

export let SERVICE_A = new InjectionToken<MyService>('service.a');

在这里，我为接口MyService创建了一个注入令牌。

在我的模块中，我将该标记与给定的实现匹配：

{ provide: SERVICE_A, useClass: ServiceImplA },

然后，在我的组件中，我指定要使用的标记：

constructor(@Inject(SERVICE_A) private service: MyService) { }

当然，您可以为每个实现创建不同的令牌。

这是StackBlitz中的一个例子。要查看其实际效果，您可以将令牌从SERVICE_A更改为SERVICE_B

https://stackblitz.com/edit/angular-nwglpj?file=app%2Fhello.component.ts0

将实现传递给Angular模块导入时

2 个答案: