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

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

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

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


angular ng-template angular2viewencapsulation
person s-f    schedule 07.05.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я вообще не рекомендую использовать ::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' - это селектор для вашего компонента, и он применит этот стиль к КАЖДОЙ кнопке в вашем компоненте.

person Marian Simonca    schedule 07.05.2019
comment
спасибо за уведомление, да, он давно устарел, а также рабочая группа CSS не согласовала альтернативу, но это может занять годы, и есть слишком много возражений по поводу этого устаревания, использование глобальных пользовательских таблиц стилей также может быть не лучшим вызов. - person talhature; 07.05.2019
comment
Согласовано. Оба решения работают, но, в конце концов, я лично предпочитаю не использовать ng-deep. Ваше здоровье :) - person Marian Simonca; 07.05.2019
comment
да, я интересовался глобальными стилями, но, может быть, и без них есть решение. Немного контекста, эта проблема возникает из проекта библиотеки, поэтому мне также пришлось бы доставлять глобальные стили в хост-приложение. - person s-f; 07.05.2019

arrow_upward
1
arrow_downward

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

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

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

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

person talhature    schedule 07.05.2019
comment
это устарело. - person s-f; 07.05.2019