Question

我想设计一个我想强制执行的组件。注意构造函数。

//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: (?).

Answer 1

this answer：

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) {};

如何在角度中强制执行组件服务接口

1 个答案:

TypeScript接口不是有效的令牌