Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/linq/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular @NgModule、@Injectable@Componenet:依赖项注入和代码重用_Angular_Angular2 Services - Fatal编程技术网

Angular @NgModule、@Injectable@Componenet:依赖项注入和代码重用

Angular @NgModule、@Injectable@Componenet:依赖项注入和代码重用,angular,angular2-services,Angular,Angular2 Services,我需要将服务注入到组件中。所有这些都在app.module中指定,如下例所示 然而,我目前的理解是,上的角度依赖注入支持使用类而不是接口进行编程 例如:我有两项服务。DogService和CatService都实现了AnimalService接口 export interface AnimalServiceInferface { makeSound(): String; } @Injectable() export class DogService implements AnimalS

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

然而,我目前的理解是,上的角度依赖注入支持使用类而不是接口进行编程

例如:我有两项服务。DogService和CatService都实现了AnimalService接口

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

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


是否注入
CatService
DogService
,取决于您提供它们的位置。如果路由组件注册了提供程序,则其子代将获得此实例。如果没有,DI将向上查找,直到找到具有匹配键的提供程序,并返回找到的第一个提供程序的实例。

谢谢。然而,这并不能清楚地解释两条使用同一组件的独立路由如何对一条路由使用CatService,对另一条路由使用DogService。这可以做到吗?你不能控制每个路由(至少我现在想不出一种方法),但你可以控制每个父组件,这在你的情况下可能有效,也可能无效。提供程序使用组件进行硬编码(添加到
提供程序
),其所有子代都从该提供程序获取实例,除非其中一个在其自己的
提供程序
列表中覆盖该实例。谢谢,因此,这一想法的真正威力似乎已经丧失。我能看到的唯一解决方法是创建(空)组件,该组件是主组件的子类。嗯……不太理想。
providers: [
    { provide: 'AnimalService': useClass: CatService},
    // { provide: 'AnimalService': useClass: DogService}
],
constructor(@Inject('AnimalService') animalService: AnimalServiceInferface) {