Меня интересует, как проверить в консоли, какой компонент был отрендерен. Я имею в виду, давайте предположим, что в консоли -> Элементы вы можете увидеть, например, много div. Как вы можете проверить, из какого компонента приходят эти div?

0
denisiulian 4 Фев 2022 в 13:28

2 ответа

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

Если вы добавите указанный выше компонент в свое приложение, вы сможете увидеть <my-component>...</my-component> на панели DevTools > Elements.

Вы также можете использовать расширение Angular DevTools для изучения HTML ваших компонентов.

0
dopoto 4 Фев 2022 в 13:41

Вы можете просто проверить HTMLв инструментах разработчика Chrome. Просто щелкнув правой кнопкой мыши и выбрав inspect. В разделе Elements, где показаны все HTML страницы, вы можете увидеть разные <div> и т. д. Если вы внимательно посмотрите на это, есть также теги компонентов, которые используются angular для отображения этих <div>.

Например, в простом Angular-проекте stackblitz. Простой просмотр HTML покажет нам это

Example Image for Inspection

Здесь вы можете видеть, что <h1> находится внутри hello-component Angular, что показано тегом <hello .... >. Который находится внутри другого компонента my-app-component с именем <my-app...>. По этой логике вы можете легко увидеть, какой HTML находится внутри какого компонента Angular.

0
HassanMoin 4 Фев 2022 в 14:04