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

时间:2017-08-08 14:02:36

标签: angular

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

//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 - 这表示此组件提供UserServiceMockUserService接口的具体实现。

但由于2个主要问题,我无法做到这一点。 在DemoComponent我收到了错误,我得到了CoolHeader

Can't resolve all parameters for CoolHeader: (?).

1 个答案:

答案 0 :(得分:1)

this answer

  

TypeScript接口不是有效的令牌

     

(...)

     

如果您非常习惯依赖注入,这似乎很奇怪   键入的语言,其中接口是首选的依赖项查找   键。

     

这不是Angular的所作所为。接口是TypeScript设计时   神器。 JavaScript没有接口。 TypeScript接口   从生成的JavaScript中消失。没有接口类型   为Angular在运行时找到的信息。

由于JS 中不存在接口,您需要使用该解决方法:

  1. 创建注入令牌(在user.ts中):

    export let USER_SERVICE = new InjectionToken<UserService>('my-user-service');
    
  2. demo.component.ts

    providers: [{ provide: USER_SERVICE, useClass: MockUserService }]
    
  3. cool-header.component.ts

    constructor( @Inject(USER_SERVICE) private userService: UserService) {};