Включение Angular2 - применить css к классу дочерних элементов

У меня есть элемент управления, называемый раскрывающимся списком, который использует включение. Обратите внимание на класс dropdown-content во второй строке:

<div>
  <div *ngIf="dropdownVisible" class="dropdown-content">
    <ng-content select="dropdowncontent"></ng-content>
  </div>
</div>

Я построил второй элемент управления, который пытается использовать первый:

<dropdown>
  <dropdowncontent>
     //some stuff here
  </dropdowncontent>
</dropdown>

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

styles: [`
    .dropdown-content {
        border: green solid 5px;
    }
`]

Однако правило стиля, похоже, не применяется. Я предполагаю, что моим усилиям мешает что-то связанное с теневым домом, но я не уверен.

Есть ли способ для родительского элемента управления применить стили к дочернему элементу управления?

После отображения элементов управления начало HTML-кода выглядит следующим образом:

<dropdown _ngcontent-lgf-3="" _nghost-lgf-4="">
    <div _ngcontent-lgf-4="">
    <div _ngcontent-lgf-4="" class="dropdown-content">
            <dropdowncontent _ngcontent-lgf-3="">

Что показывает, что выпадающее содержимое класса создается в окончательном html.


angular css transclusion
person Des Horsley    schedule 23.06.2016    source источник
comment
Гюнтер, как это дубликат? Этот вопрос касается стиля тега ng-content, мой вопрос касается родительского стиля дочерних элементов, созданных тегом ng-content.   -  person Des Horsley    schedule 23.06.2016

Ответы (1)


arrow_upward
2
arrow_downward

из родительского файла scss вы можете перейти

:host /deep/ .child-css-class {
    some-scss
}

см. здесь для справки

person Daniel Swiegers    schedule 13.09.2017