Question

我有一个Angular2应用程序。为了在测试中模拟<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="@dimen/preference_category_margin" android:paddingRight="@dimen/preference_category_margin" android:orientation="vertical"> <TextView android:id="@android:id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:textStyle="bold" android:textSize="13sp" android:textAllCaps="false" android:textColor="@color/colorAccent"/> <TextView android:id="@android:id/summary" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="12sp" android:textColor="@color/colorAccent" android:textAllCaps="false"/> </LinearLayout>对象，我想将它注入服务，如：

Document

角度的import { Document } from '??' @Injectable() export class MyService { constructor(document: Document) {} }服务使用内部Title方法：

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

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

Answer 1

Angular中直接支持这一点

https://angular.io/api/common/DOCUMENT

MY-service.ts：

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

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

MY-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个代表点），但是这里有角度文档中所述。

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

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

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

从angular common：

导入它

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]

中使用令牌

Answer 4

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

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

是引起问题的“：文档”。

如何在Angular 2服务中注入Document

4 个答案:

MY-service.ts：

MY-service.spec.ts