Question

我正在通过互联网寻找随机 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 中的依赖注入。如何使抽象类可注入？

Answer 1

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

提供的给定接口的实现

Answer 2

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

以下是在 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) {}

...

Angular2 依赖注入抽象类

2 个答案: