我想设计一个我想强制执行的组件。 注意构造函数。
//cool-header.component.ts
@Component({
selector: 'cool-header',
moduleId: module.id,
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CoolHeader {
constructor(private userService: UserService) {};
getUser(): User {
return this.userService.getUser();
}
}
进一步下来我希望UserService成为接口
//user.ts
export interface UserService {
getUser(): User;
}
现在我的组件的用户应该使用如下组件:
//demo.component.ts
@Component({
selector: 'demo-app-root',
moduleId: module.id,
template: `<cool-header></cool-header>`,
providers: [{provide: UserService, useClass: MockUserService}]
})
export class DemoComponent {
}
注意providers
- 这表示此组件提供UserService
与MockUserService
接口的具体实现。
但由于2个主要问题,我无法做到这一点。
在DemoComponent
我收到了错误,我得到了CoolHeader
Can't resolve all parameters for CoolHeader: (?).
答案 0 :(得分:1)
TypeScript接口不是有效的令牌
(...)
如果您非常习惯依赖注入,这似乎很奇怪 键入的语言,其中接口是首选的依赖项查找 键。
这不是Angular的所作所为。接口是TypeScript设计时 神器。 JavaScript没有接口。 TypeScript接口 从生成的JavaScript中消失。没有接口类型 为Angular在运行时找到的信息。
由于JS 中不存在接口,您需要使用该解决方法:
创建注入令牌(在user.ts
中):
export let USER_SERVICE = new InjectionToken<UserService>('my-user-service');
在demo.component.ts
:
providers: [{ provide: USER_SERVICE, useClass: MockUserService }]
和cool-header.component.ts
:
constructor( @Inject(USER_SERVICE) private userService: UserService) {};