Question

我需要将一个服务注入一个组件。所有这些都在app.module中指定，如下例所示。

然而，我目前的理解是Angular依赖注入支持使用类而不是接口进行编程。

例如：我有两项服务。 DogService和CatService都实现了AnimalServiceInferface。

export interface AnimalServiceInferface {
    makeSound(): String;
}

@Injectable()
export class DogService implements AnimalServiceInferface {
    makeSound(): String {
        return "Woof";
    }
}

@Injectable()
export class CatService implements AnimalServiceInferface {
    makeSound(): String {
        return "Woof";
    }
}

然后我按照这个

连接我的@NgModule

@NgModule({
    imports: [
        APP_ROUTES,
        BrowserModule
    ],
    declarations: [
        AnimalComponent
    ],
    providers: [
        CatService,
        DogService
    ],
    bootstrap: [
        AppComponent
    ]
})

然后，在我的组件中，我需要使用这两种服务中的任何一种。

@component()
export class AnimalComponent implements OnInit {

    animalSound: string;

    constructor(animalService: AnimalServiceInferface) {
    }

    onInit() {
        this.animalSound = animalService.makeSound();
    }

}

如何连接它以便我的应用程序可以使用AnimalServiceInferface实现，但使用的实现由情况决定。例如，这可以基于特定路线或不同组件配置来确定。

非常感谢

JT

Answer 1

您可以使用字符串或OpaqueToken作为键

providers: [
    { provide: 'AnimalService': useClass: CatService},
    // { provide: 'AnimalService': useClass: DogService}
],

constructor(@Inject('AnimalService') animalService: AnimalServiceInferface) {

如果注入CatService或DogService取决于您提供的位置。如果路由组件已注册提供程序，则其后代将获取此实例。如果没有，那么DI将向上看，直到找到具有匹配键的提供者并返回它找到的第一个提供者的实例。

@NgModule，@ Injectable @Componenet：依赖注入和代码重用

1 个答案: