Comment injecter un Document dans le service Angular 2

j'ai une application Angular2. Pour se moquer de la Document objet dans les tests, je tiens à injecter au service de la forme:

import { Document } from '??' 

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

Title service angulaire utilise l'interne getDOM() méthode:

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

Existe-t-il un moyen simple d'injecter le document dans le service? En outre, comment devrais-je faire référence dans les fournisseurs tableau?

25
demandé sur RJo 2016-05-30 11:44:31
la source

3 ответов

ceci est directement supporté en angle depuis un certain temps

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

mon service.ts:

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

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

mon service.specs.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
  ]));

  ...
});
45
répondu Günter Zöchbauer 2018-06-27 09:50:44
la source

Blockquote @GünterZöchbauer il semble que le DOCUMENT est déprécié. Une idée de comment faire ça une fois que c'est parti? Par exemple, comment définir dynamiquement le favicon?

au lieu d'importer du navigateur de plate-forme comme ceci:

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

Importer à partir angulaire de la commune:

import {DOCUMENT} from '@angular/common';
20
répondu Ruud Voost 2017-08-02 14:39:07
la source

Angulaire de définir le DOCUMENT comme un InjectionToken

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

dom_tokens.ts

et l'injecter avec du document dans navigateur.ts

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


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

par conséquent, lorsque nous les utilisons, nous avons juste besoin d'injecter @Inject(DOCUMENT)

ou utiliser le jeton directement dans deps:[DOCUMENT]

7
répondu maxisam 2017-05-02 20:44:13
la source

Autres questions sur