typescript - 如何在服务中注入(inject)Document？

Question

我有一个 Angular 2 应用程序。为了在测试中模拟 Document 对象，我想将它注入(inject)到服务中，例如:

import { Document } from '??' 

@Injectable()
export class MyService {
  constructor(document: Document) {}
}

Angular 的Title 服务uses the internal getDOM() method .

有什么简单的方法可以将 Document 注入(inject)到服务中吗？另外，我应该如何在 providers 数组中引用它？

Answer 1

Angular 已经支持了一段时间。

您可以使用 DOCUMENT @angular/common 包提供的常量。

DOCUMENT 常量的描述(取自 API documentation ):

A DI Token representing the main rendering context. In a browser, this is the DOM Document.

示例如下:

我的服务.service.ts:

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

我的服务.service.spec.ts

import { provide } from '@angular/core';
import { DOCUMENT } from '@angular/common';

import { MyService } from './my-service';

class MockDocument {}

describe('MyService', () => {
  beforeEachProviders(() => ([
    provide(DOCUMENT, { useClass: MockDocument }),
    MyService
  ]));

  ...
});