I have created two different implementations for an interface and assigned them as providers for two separate components. However, I am encountering the following error: Error: Can't resolve all parameters for ChildComponent: (?).
What could be the issue here?
interface MyInterface {
log(msg: string): void
}
class DebugService implements MyInterface {
public log(msg:string) {
console.debug(msg);
}
}
class WarningService 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: [WarningService]
})
export class ChildComponent {
private dummy: MyInterface;
constructor(d: MyInterface) {
this.dummy = d;
}
log() {
this.dummy.log("Child");
}
}