Estoy interesado en cómo verificar en la consola qué componente se representó. Quiero decir, supongamos que en la consola -> Elementos puedes ver muchos divs, por ejemplo. ¿Cómo puede verificar de qué componente provienen estos divs?
@Component({ selector: 'my-component', template: '<div><div></div></div>' }) export class MyComponent { ... }
Si agrega el componente anterior en su aplicación, debería poder ver <my-component>...</my-component>
en su panel DevTools > Elements.
También puede usar la extensión Angular DevTools para explorar el HTML de sus componentes.
Simplemente puede inspeccionar el HTML
en las herramientas de desarrollo de Chrome. Simplemente haciendo clic derecho y seleccionando inspect
. En la sección Elements
, donde se muestra todo el HTML
de la página, puede ver diferentes <div>
, etc. Si lo observa de cerca, también hay etiquetas de componentes que angular usa para mostrar esos <div>
.
Por ejemplo, en el proyecto Angular de stackblitz simple. La simple inspección del HTML nos mostrará esto
Aquí puede ver que <h1>
está dentro del hello-component
de Angular que se muestra con la etiqueta <hello .... >
. Que está dentro de otro componente my-app-component
llamado <my-app...>
. Con esta lógica, puede ver fácilmente qué HTML
está dentro de qué componente angular