Question

我为一个接口创建了两个实现，并将这些实现作为两个不同组件的提供者提供。我收到此错误错误：无法解析ChildComponent的所有参数：（？）。

我在哪里做错了？

interface MyInterface {
    log(msg: string): void
}

class DebugService implements MyInterface {
    public log(msg:string) {
        console.debug(msg);
    }
}

class ErrorService implements MyInterface {
    public log(msg: string) {
        console.error(msg);
    }
}


import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<div (click)="log()">Root Component</div><my-child></my-child><my-child></my-child>' //app/app.component.html
    , providers: [DebugService]
})
export class AppComponent {
    private dummy: MyInterface;
    constructor(d: MyInterface) {
        this.dummy = d;
    }
    log() {
        this.dummy.log("Root");
    }
}


@Component({
    selector: 'my-child',
    template: `<h4 (click)="log()"> Hello Child</h4>`,
    providers: [ErrorService]
})
export class ChildComponent {
    private dummy: MyInterface;
    constructor(d: MyInterface) {
        this.dummy = d;
    }
    log() {
        this.dummy.log("Child");
    }
}

Answer 1

要使用依赖注入，您需要使用@Injectable装饰器标记服务。此外，您无法注入界面，您需要注入您提供的课程。

@Injectable()
class ErrorService implements MyInterface {
    public log(msg: string) {
        console.error(msg);
    }
}
@Component({
    selector: 'my-child',
    template: `<h4 (click)="log()"> Hello Child</h4>`,
    providers: [ErrorService]
})
export class ChildComponent {
    constructor(private dummy: ErrorService) {}
    log() {
        this.dummy.log("Child");
    }
}

Answer 2

根据Angular website，“从纯技术角度来看，JavaScript和Typescript开发人员的接口是可选的.JavaScript语言没有接口.Angular在运行时看不到TypeScript接口，因为它们从编译了JavaScript。“

由于这个原因，我们不能使用接口来请求具体实现。

@Injectable（）不是DI工作所需的装饰器。仅当服务依赖于某些其他服务时，它才会在服务类上进行装饰。

Angular 2 - DI不起作用

2 个答案: