Как определить, какой компонент Angular добавил данный элемент <style>в HTML в Dev Tools? - PullRequest
Новая
       17

Как определить, какой компонент Angular добавил данный элемент <style>в HTML в Dev Tools?

0 голосов
/ 27 марта 2019

Я работаю над большим приложением Angular с десятками компонентов.У большинства из них есть немного CSS, обычно с включенной View Encapsulation, но не всегда.Angular добавляет все фрагменты CSS в заголовок файла index.html в тегах <style>.Когда вы просматриваете его в инструментах разработчика Chrome, вы видите что-то похожее на то, что показано ниже.

Если View Encapsulation включен, Angular добавляет атрибут к компонентам (см. Первый расширенный тег ниже).Сложно привязать атрибут _ngcontent-xxx к фактическому компоненту HTML ниже на странице.

Если для View Encapsulation задано значение none, атрибут не используется. 

...
<style>...</style>
<style>...</style>
<style>
   ol[_ngcontent-c12] {
      list-style-type: none;
   }
</style>
<style>
   ol {
      list-style-type: square;
   }
</style>
<style>
   ol {
      list-style-type: disc;
   }
</style>
<style>...</style>
<style>...</style>
...

В моем случае некоторые библиотеки в моей папке node_modules задают стили без View Encapsulation.

Как узнать, какой компонент добавил, какой элемент стиля?

...