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]
