Вход

Просмотр полной версии : DI в Angular


7ver2009
09.09.2018, 18:18
Angular 6.
Доброго времени суток. Изучая Angular столкнулся с таким случаем:


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

@Component({
selector: 'app-root',
template: "<div>Test</div>"
})
export class AppComponent implements OnInit {

x = DOCUMENT;
constructor(@Inject(DOCUMENT) private y){
}
ngOnInit(){
console.log(this.x);
console.log(this.y);
}
}


Первый log выводит: InjectionToken{...}
Второй log выводит: #document - то есть ссылку на глобальный объект.

Если попытатся создать экземпляр класса через new DOCUMENT(), вполне справедливо ругается, что невозможно использовать new с выражением у которого нет конструктора. То-есть DOCUMENT не функция, и не класс, а просто объект записанный в константу.

Собственно вопрос: что происходит с DOCUMENT в constructor, что он меняет значение? Всегда считал (видимо ошибочно), что при выполнении dependency injection создается экземпляр класса. Но по всем признакам это просто обьект, а не функция конструктор, или класс. Так что же за колдунство там творится?:blink: :blink: :blink:

Интересует именно внутренняя механика Angular, я прекрасно знаю, что в работе просто используем DI, и улыбаемся. Но хочется понимать глубже.;)

destus
10.09.2018, 08:53
Самый лучший способ это полазить в исходном коде.
Всегда считал (видимо ошибочно), что при выполнении dependency injection создается экземпляр класса
Создается, если не может найти в текущем Injector`е или на уровне выше, пока не дойдет до APP_ROOT.
Собственно вопрос: что происходит с DOCUMENT в constructor, что он меняет значение?
Если в общих чертах, то при бутстрапе нашего приложения в браузере, регистрируется некий набор провайдеров (https://github.com/angular/angular/blob/bebedfed24d6fbfa492e97f071e1d1b41e411280/packages/platform-browser/src/browser.ts#L29), среди которых и есть этот самый DOCUMENT, определенный фабричной функцией (https://github.com/angular/angular/blob/bebedfed24d6fbfa492e97f071e1d1b41e411280/packages/platform-browser/src/browser.ts#L62), возвращающей ссылку на window.document

7ver2009
10.09.2018, 19:40
Большое спасибо:)

Ваш ответ породил еще кучку вопросов, но и отлично. Буду разбиратся дальше.

Посоветуйте пожалуйста какие либо ресурсы, или статьи в которых описана механика работы, и устройства Angular. Не рабочие кейсы, а именно подкапотные приблуды.

destus
11.09.2018, 06:31
https://habr.com/post/348818/
https://github.com/angular/angular/issues
+ исходный код