typescript - que - servicios angular 6

Cómo inyectar documentos en el servicio Angular 2

Question

Tengo una aplicación Angular2. Para burlarse del objeto Document en las pruebas, me gustaría inyectarlo en el servicio como:

import { Document } from ''??'' 

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

El servicio de Title de angular utiliza el getDOM() interno getDOM() :

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

¿Hay alguna forma simple de inyectar el documento al servicio? Además, ¿cómo debo hacer referencia en la matriz de proveedores?

Answer 1

Además de la respuesta de @ Günter Zöchbauer.

Angular define DOCUMENT como una inyección tomada

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

dom_tokens.ts

E inyectarlo con el documento en browser.ts

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


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

Por lo tanto, cuando lo usamos, solo necesitamos inyectar @Inject(DOCUMENT)

o use el token directamente en los deps:[DOCUMENT]

Answer 2

Esto se admite directamente en Angular desde hace un tiempo

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 3

No puedo comentar directamente sobre la pregunta de adamdport (aún no hay 50 puntos de repetición), pero aquí es como se indica en los documentos angulares.

Blockquote @ GünterZöchbauer parece que el DOCUMENTO está en desuso. ¿Alguna idea de cómo hacer esto una vez que se haya ido? Por ejemplo, ¿cómo establecería el favicon dinámicamente?

En lugar de importar desde el navegador de la plataforma de esta manera:

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

Importarlo desde angular común:

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