Angular 如何检查哪个组件是 div

Question

我对如何在控制台中检查渲染了哪个组件感兴趣。我的意思是，让我们假设在 console -> Elements 中你可以看到很多 div，例如。您如何检查此 div 来自哪个组件？

Answer 1

@Component({
    selector: 'my-component',
    template: '<div><div></div></div>'
})
export class MyComponent {
...
}

如果您在您的应用中添加上述组件，您应该能够在 DevTools > Elements 面板中看到 <my-component>...</my-component>。

您还可以使用 Angular DevTools extension 探索组件的 HTML。

Answer 2

您只需在 Chrome 的开发工具中查看 HTML。只需 right-clicking 并选择 inspect。在显示所有页面 HTML 的 Elements 部分中，您可以看到不同的 <div> 等。如果您仔细观察，还会发现 [=33= 使用的组件标签] 来显示那些 <div>.

例如，在简单的 stackblitz Angular 项目中。 HTML 的简单检查将向我们展示这个

在这里你可以看到 <h1> 在 Angular 的 hello-component 里面，由 <hello .... > 标签显示。它位于另一个名为 <my-app...> 的组件 my-app-component 中。按照这个逻辑，你可以很容易地看出哪个 HTML 里面是哪个 Angular Component

Angular 如何检查哪个组件是 div

Angular how to check from which component is a div

javascript

user-interface

dom

angular