Angular 2+ - очиститель html без дополнительных тегов для составных элементов

Question

Есть ли способ избежать тегов, сгенерированных для компонентов, чтобы мой вывод был чистым и легким для стилизации?

Я пытаюсь преобразовать шаблон bootstrap в компоненты angular, но обнаружил, что для каждого компонента создается дополнительный тег.

Вот html, который я получил в шаблоне

<div id="container">
   <div id="component">
     ------
     ------
   </div>
</div>

После того, как я преобразовал #component как Angular Component, мой результат html будет

<div id="container">
  <app-component>
      <div id="component">
       -------------
       -------------
      </div>
  </app-component>
</div>

Здесь я пытаюсь найти способ избежать этого, чтобы мне не приходилось настраивать стиль после перемещения компонентов html.

Заранее спасибо

Answer 1

i, вместо этого вы можете опустить лишние div, потому что ваш компонент - это контейнер

<app-container>
  <app-component>

  </app-component >
</app-container>

, и вы можете использовать: host {} для стилизации компонента или класса обычным способом

в container.s css

:host {
  background-color: green;
}

в component.s css

:host {
  background-color: indigo;
}

Answer 2

В вашем AppComponent, скажем, вы можете игнорировать добавление div с помощью `id =" component ", а в родительском компоненте вы можете назначить id непосредственно своему дочернему компоненту.

<div id="container">
  <app-component id="component">
       -------------
       -------------
  </app-component>
</div>

Если вы хотите добавить больше стилей в контейнер дочернего компонента в его css файле, вы можете сделать это так:

:host {
 width: 100%;
}

Надеюсь, я сделал сам ясно.