выбрал всех возможных непосредственных потомков нг-контента

Question

ОБНОВЛЕНИЕ

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

:host {
&::ng-deep*:hover {
    background: red;
  }
}

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

Я пытался использовать :first-child вместо *, но, очевидно, ::ng-deep отвечает за взятие меняэто на много шагов глубже.

---

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

@Component({
  selector: 'custom-template',
  template: '<ng-content></ng-content>,
  styles: [`
    :host {
      display: flex;
      flex-direction: column;
    }
  `]
})
export class Template {
}

пока все хорошо, шаблон передается и точно стилизуетпроблема содержимого in in.

Когда я пытаюсь передать стилирование самому содержимому, которое в настоящее время ничего не отражает:

style.scss:

:host {
  display: flex; // reflected
  flex-direction: column; // reflected
  * { // trying to select any child
    &:hover { 
      background: red; // does not reflect
    }
  }
}

В моем случае я передаю массив элементов:

<custom-template>
  <div *ngFor="let item of items">
</custom-template>

И я хотел бы передать поведение :hover для любого из потомков, переданных в шаблон

ОБНОВЛЕНИЕ:

сбой методы:

:host {
  &*:hover {
    background: red; // styles the entire array on hover
  }
}

Answer 1

Попробуйте, пожалуйста, это должно работать.

:host:hover { background: red;}
 or
:host(:hover) { background: red;}