Как стилизовать шаблон внутри компонента - PullRequest
Новая
       13

Как стилизовать шаблон внутри компонента

0 голосов
/ 07 мая 2019

Итак, я хочу передать шаблон компоненту и отобразить этот шаблон внутри, применяя стиль из этого компонента, а не из вызывающего компонента.Можно ли это сделать без установки ViewEncapsulation.None?

Я сделал для этого небольшой стек-блиц.Я хочу param button также отображается зеленым цветом.

https://stackblitz.com/edit/angular-zrpufe?file=src%2Fapp%2Fhello.component.ts

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Я вообще не рекомендую использовать ::ng-deep. Это устарело и со временем будет удалено навсегда.

Отметьте этот ответ .

Я изменил ваш код и добавил контейнер div для вашего HelloComponent. С классом на этом div вы можете управлять стилями внутри вашего компонента. Любой стиль, который вы напишите в своем основном файле style.css , не будет нуждаться в ::ng-deep или ViewEncapsulation.None. 

// styles.scss 

  .hello-container button {
      background: green;
   }
// hello.component.ts -> template

<div class="hello-container">
 ...
</div>

OR

еще проще:

Вам не нужен контейнер div, просто добавьте это в свой style.css 

hello button {
      background: green;
    }

'hello' - селектор для вашего компонента, и он будет применять этот стиль к КАЖДОЙ кнопке в вашем компоненте.

1 голос
/ 07 мая 2019

Просто попробуйте это 

  styles: [`
   ::ng-deep button {
       background: green;
    }
  `]

Используйте :: ng-deep пронизывающий теневой комбинатор потомков, чтобы принудительно перенести стиль вниз через дерево дочерних компонентов во все представления дочерних компонентов.Комбинатор :: ng-deep работает с любой глубиной вложенных компонентов и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента.

РЕДАКТИРОВАТЬ: Этот глубокий селекторуже давно устарела, и CSS Work Group еще не согласовала альтернативу.До тех пор, пока есть замена, которую я предпочитаю использовать deep, потому что, хотя альтернативные решения, такие как обертывание элемента с помощью div и стилизация глобально, хороши, у него тоже есть проблемы, самая большая проблема с ним, он не работает между модулями под углом,Вам решать.

...