如何在Angular 2服务中注入Document

Question

我有一个Angular2应用程序.为了Document在测试中模拟 对象,我想将它注入服务,如:

import { Document } from '??' 

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

Titleangular 的服务使用内部getDOM()方法:

https://github.com/angular/angular/blob/master/modules/%40angular/platform-b​​rowser/src/browser/title.ts

有没有简单的方法将文档注入服务？另外,我应该如何在providers数组中引用它？

Answer 1

一段时间以来,Angular直接支持这一点

https://angular.io/api/common/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
  ]));

  ...
});

Answer 2

我无法直接评论adamdport的问题(还没有50个代表点),但是这里有角度文档中所述.

Blockquote @GünterZöchbauer看起来DOCUMENT已被弃用.一旦它消失,任何想法怎么做？例如,我如何动态设置favicon？

而不是像平台浏览器那样导入:

import { DOCUMENT } from '@angular/platform-browser';

从角度常见导入它:

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

Answer 3

除了@GünterZöchbauer的回答.

Angular将DOCUMENT定义为InjectionToken

export const DOCUMENT = new InjectionToken<Document>('DocumentToken');

dom_tokens.ts

并在browser.ts中将其与文档一起注入

{provide: DOCUMENT, useFactory: _document, deps: []}


export function _document(): any {
  return document;
}

因此,当我们使用它时,我们只需要注入 @Inject(DOCUMENT)

或直接使用令牌 deps:[DOCUMENT]