Question

tl; dr：在调试/开发过程中，如何查看特定html元素的提供者注入器或更好地查看其节点定义。

因此，根据blog post

每个视图节点都是使用节点定义创建的，该节点定义包含描述该节点的元数据。

在Angular中，描述HTML元素的节点定义定义了自己的注入器。换句话说，组件模板中的HTML元素定义了自己的元素注入器。通过在相应的HTML元素上应用一个或多个指令，该注入器可以使用提供程序填充。

Angular为此模板创建的定义包括div元素[See gist]的以下元数据

在调试过程中如何在应用程序中查看元素的节点定义？即在我的Chrome开发工具中。

Answer 1

在Chrome开发工具中，ng serve期间：

检查要观看的组件的元素
它将在开发工具的Elements标签中突出显示
找到父标记（通常为app-something）
单击它

现在，如果您在控制台中输入console.log($0)，它将显示此元素。不要选择其他元素，因为这会丢失该组件的上下文。

输入const comp = ng.probe($0).componentInstance

您现在可以引用您的组件。

除非您将其声明为依赖项，否则我不确定您是否可以访问其注射器。

Answer 2

假设您具有添加了提供程序的以下指令：

@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属性指向具有公共提供程序的对象。

如何在其节点定义内获取组件/元素提供者注入器

2 个答案: