使用 Angular 4 注入接口

Question

我正在尝试创建一个通用的DeleteableConfirmationComponent，它允许我显示一个确认对话框并从任何实现Deleteable 接口的注入服务调用delete 方法。

为此，我创建了这个接口：

export interface Deleteable {
  delete(object);
}

我有一个实现它的服务：

@Injectable()
export class LocalityService implements Deleteable {
  delete(locality): Observable<Locality> {
    // Delete logic.
  }
}

对于DeleteableConfirmationComponent，我尝试使用构造函数注入服务：

export class DeleteableConfirmationComponent {
  constructor(
    public dialog: MdDialogRef<DeleteableConfirmationComponent>,
    @Inject(MD_DIALOG_DATA) public data: any,
    private service: Deleteable
  ) {}

  delete() {
    this.service.delete(this.object)
                .subscribe(() => {
                  this.dialog.close();
                });
  }
}

但不幸的是，我收到一条错误消息，提示 它无法解析 DeleteableConfirmationComponent 的所有参数。

目前，我正在使用对话框数据选项来传递我的服务：

confirmDelete(locality) {
  this.dialog.open(DeleteableConfirmationComponent, {
    data: {
      service: this.localityService
    }
  });
}

但它感觉很脏，并且确实允许注入任何类型的服务，而我想强制实现 Deleteable 接口的服务。

我想我可能会更好地使用 abstract class，但我更喜欢组合而不是继承。

有什么想法或最佳实践建议吗？

Answer 1

如 cmets 中所述，您可以将接口转换为抽象类：

export abstract class Deleteable {
  abstract delete(object);
}

然后在您的提供者中，您可以将其映射到真正的类：

providers: [{ provide: Deleteable, useValue: new LocalityService() }]

您可能不喜欢这种方法，因为现在看来LocalityService 必须扩展Deleteable。但是如果LocalityService 需要扩展其他类怎么办？不允许多重继承：

// Error: Classes can only extend a single class
export class LocalityService extends OtherClass, Deleteable { }

或者您可能根本不喜欢 Deleteable 现在出现在 LocalityService 的原型链中的事实：

export class LocalityService extends Deleteable {
  delete(locality): void {
    // Returns true
    alert(this instanceof Deleteable);
  }
}

但是，如this answer 所示，TypeScript 允许您将类视为接口。因此，您可以将implements 与抽象类一起使用。

export class LocalityService extends OtherClass implements Deleteable {
  delete(locality): void {
    // Returns false
    alert(this instanceof Deleteable);
  }
}

因此，就所有意图和目的而言，您的抽象类现在表现得像一个接口。它甚至不会出现在原型链中。

Answer 2

InjectionToken 可以替代已弃用的OpaqueToken

export const AuthenticationProvider = new InjectionToken(
  "AuthenticationProvider",
  { providedIn: "root", factory: () => new CognitoAuthenticationProvider() }
);

...

@Injectable()
export class CognitoAuthenticationProvider implements IAuthenticationProvider {

...

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  constructor(
    @Inject(AuthenticationProvider)
    private authenticationProvider: IAuthenticationProvider,
    private http: HttpClient
  ) {}