Angular2 依赖注入抽象类

问题描述

我正在通过互联网寻找随机 Angular 问题的解决方案，并遇到以下示例：

export class AppModule {
  constructor(private router: Router,private viewportScroller: ViewportScroller) {
    this.router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll),pairwise()
    ).subscribe((e: Scroll[]) => {
      const prevIoUs = e[0];
      const current = e[1];
      if (current.position) {
        this.viewportScroller.scrollToPosition(current.position);
      } else if (current.anchor) {
        this.viewportScroller.scrollToAnchor(current.anchor);
      } else ...
   ...

ViewportScroller 是一个抽象类。我试图了解 Angular 中的依赖注入。如何使抽象类可注入？

解决方法

将注入的是扩展 ViewportScroller 的实际类。 Interfacets 也可以作为注入令牌。将注入的是某些（如果有）provider

提供的给定接口的实现 ,

您可以注入具有具体实现的抽象类。

以下是在 Angular source code 中定义的 ViewportScroller：

/**
 * Defines a scroll position manager. Implemented by `BrowserViewportScroller`.
 */
export abstract class ViewportScroller {
  // De-sugared tree-shakable injection
  // See #23917
  /** @nocollapse */
  static ɵprov = ɵɵdefineInjectable({
    token: ViewportScroller,providedIn: 'root',factory: () => new BrowserViewportScroller(ɵɵinject(DOCUMENT),window)
  });

...

然后，它由BrowserViewportScroller实现：

/**
 * Manages the scroll position for a browser window.
 */
export class BrowserViewportScroller implements ViewportScroller {
  private offset: () => [number,number] = () => [0,0];

  constructor(private document: Document,private window: Window) {}

...