Как получить инжектор поставщика компонента / элемента в его определении узла

Question

tl; dr: Во время отладки / разработки, как я могу просмотреть инжектор поставщика конкретного элемента HTML или, еще лучше, его определение узла.

Итак, согласно этому сообщению в блоге

Каждый узел представления создается с использованием определения узла, содержащего метаданные, описывающие узел.

В Angular, определение узла, которое описывает элемент HTML, определяет его собственный инжектор. Другими словами, элемент HTML в шаблоне компонента определяет собственный инжектор элемента. И этот инжектор можно заполнить поставщиками, применив одну или несколько директив к соответствующему элементу HTML.

Определение, которое Angular создает для этого шаблона, включает следующие метаданные для элемента div [см. Суть]

Как я могу увидеть определение узла моего элемента в моем приложении во время отладки? то есть в моих инструментах разработчика Chrome.

Answer 1

Предположим, у вас есть следующая директива, которая добавляет провайдера:

@Directive({
    selector: '[provider]',
    providers: [
        {
            provide: 'token',
            useValue: 'value'
        }
    ]
})
export class ProviderDirective {
    constructor() {
        console.log('Ptovider Dir');
    }
}

И используйте его в шаблоне, подобном следующему:

@Component({
    selector: 'a-comp',
    template: `
        <div provider>I am div with a provider</div>
    `
})
export class AComponent {}

Чтобы найти определение элемента и поставщиков, добавленныхДиректива, откройте консоль, выберите элемент div и введите следующее:

ng.probe($0).injector.elDef

Там вы увидите свойство element, указывающее на объект с общедоступными провайдерами.

Answer 2

В Chrome dev-tools, во время ng serve:

• проверить элемент компонента, который вы хотите просмотреть
• будет выделено в инструментах разработчика Elements вкладка
• найти родительский тег (обычно app-something)
• нажмите на нее

Теперь, если вы введете console.log($0) в вашей консоли, он должен отобразить этот элемент. Не выбирайте другой элемент, так как вы потеряете контекст этого компонента.

• вход const comp = ng.probe($0).componentInstance

Теперь у вас есть ссылка на ваш компонент.

Я не уверен, что вы можете иметь доступ к его инжектору, если только вы не объявите его как зависимую.