Меня интересует, как проверить в консоли, какой компонент был отрендерен. Я имею в виду, давайте предположим, что в консоли -> Элементы вы можете увидеть, например, много div. Как вы можете проверить, из какого компонента приходят эти div?
2 ответа
@Component({
selector: 'my-component',
template: '<div><div></div></div>'
})
export class MyComponent {
...
}
Если вы добавите указанный выше компонент в свое приложение, вы сможете увидеть <my-component>...</my-component> на панели DevTools > Elements.
Вы также можете использовать расширение Angular DevTools для изучения HTML ваших компонентов.
Вы можете просто проверить HTMLв инструментах разработчика Chrome. Просто щелкнув правой кнопкой мыши и выбрав inspect. В разделе Elements, где показаны все HTML страницы, вы можете увидеть разные <div> и т. д. Если вы внимательно посмотрите на это, есть также теги компонентов, которые используются angular для отображения этих <div>.
Например, в простом Angular-проекте stackblitz. Простой просмотр HTML покажет нам это
Здесь вы можете видеть, что <h1> находится внутри hello-component Angular, что показано тегом <hello .... >. Который находится внутри другого компонента my-app-component с именем <my-app...>. По этой логике вы можете легко увидеть, какой HTML находится внутри какого компонента Angular.
En Español