TypeScript - איך להזריק Document בשירות?


יש לי אפליקציית Angular 2. בשביל למקם חיקוי לאובייקט Document בבדיקות, אני רוצה להזריק אותו לשירות כך:

import { Document } from '??' 

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

שירות Title של Angular משתמש בשיטה הפנימית getDOM().

האם יש דרך פשוטה להזריק את Document לשירות? גם, איך עלי להפנות אליו במערך providers?

תשובה #1

זה נתמך על ידי אנגולר כבר זמן מה.

אתה יכול להשתמש בקבוע DOCUMENT שמסופק על ידי החבילה @angular/common.

תיאור הקבוע DOCUMENT (נלקח מתיעוד ה-API):

אסימון DI המייצג את ההקשר הראשי של הרינדור. בדפדפן, זהו מסמך ה-DOM.

דוגמה מוצגת להלן:

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

  ...
});

תשובה #2

אני לא יכול להגיב ישירות על השאלה של adamdport (עדיין אין לי 50 נקודות מוניטין), אבל הנה זה כפי שמצוין במסמכי Angular.

Blockquote @GünterZöchbauer נראה ש-DOCUMENT כבר לא בשימוש. יש לך רעיון איך לעשות את זה ברגע שזה נעלם? לדוגמה, איך אני מגדיר את ה-favicon באופן דינמי?

במקום לייבא מהפלטפורמה דפדפן כך:

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

יְבוּא אותו מ-angular common:

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

תשובה #3

בנוסף לתשובה של @Günter Zöchbauer.

Angular מגדיר את DOCUMENT כ-InjectionToken

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

dom_tokens.ts

והזריק אותו עם document ב-browser.ts

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


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

לכן, כאשר אנחנו משתמשים בזה, אנחנו פשוט צריכים להזריק @Inject(DOCUMENT)

או להשתמש בטוקן ישירות ב-deps:[DOCUMENT]