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 {
}

到目前为止，模板可以很好地传递内容并准确设置其中的内容样式。

问题是当我尝试将样式传递给内容本身时，该内容目前不反映任何内容：

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;}

选择了所有可能的ng-content子级

1 个答案: