非 ngcontent 元素的样式

Question

Angular 为自己的组件添加没有属性的标签。在 Angular 中，7 个选择器 /deep/、>>> 和 ::ng-deep 已被弃用，所以现在我无法通过 :host() 和 :host-context().

原妆：

<mat-expansion-panel>
  <mat-expansion-panel-header>expansion-panel-header>
  ...
</mat-expansion-panel>

编译后补：

<mat-expansion-panel _ngcontent-c13="" class="mat-expansion-panel">
  <mat-expansion-panel-header _ngcontent-c13=""></mat-expansion-panel-header>
  <div class="mat-expansion-panel-content">
    <div class="mat-expansion-panel-body">
      ...
    </div>
  </div>
</mat-expansion-panel>

有一些情况，我编译 SCSS 后得到的结果：

1.
.mat-expansion-panel-body {
  padding: 0;
}

 |
 |
\ /
 V

.mat-expansion-panel-body[_ngcontent-c13] {
  padding: 0;
}



2.
:host-context() .mat-expansion-panel-body {
  padding: 0;
}

 |
 |
\ /
 V

[_nghost-c13]   .mat-expansion-panel-body[_ngcontent-c13] {
  padding: 0;
}



3.
:host() AND :host-context() {
  .mat-expansion-panel-body {
    padding: 0;
  }
}

 |
 |
\ /
 V

[_nghost-c13]   .mat-expansion-panel-body[_ngcontent-c13] {
  padding: 0;
}

但我只想要

.mat-expansion-panel-body[_ngcontent-c13] {
  padding: 0;
}

请问我该怎么办？

Answer 1

您通常不能依赖 _ngcontent-* 属性，因为它们是动态的且不可预测的。这些属性是 Angular 'scopes' 样式的一部分，以便在一个组件中应用的样式不会影响在另一个组件中应用于同一项目的样式。您仍然可以通过将 class 或属性应用于外部组件来将样式限制在一个范围内：

HTML

<mat-expansion-panel my-mat-expansion-panel>
  <mat-expansion-panel-header>...</mat-expansion-panel-header>
  ...
</mat-expansion-panel>

CSS

.mat-expansion-panel[my-mat-expansion-panel] .mat-expansion-panel-body {
  padding: 0;
}

对于您的顾虑，如果可能的话，这与使用 _ngcontent-* 属性没有太大区别。

您还可以使用 Angular Material 组件所在的任何组件作为 CSS 选择器的一部分来限制范围：

my-outer-component .mat-expansion-panel .mat-expansion-panel-body {
  padding: 0;
}

请注意，您的样式需要采用全局样式 sheet 当然，而不是组件样式。

非 ngcontent 元素的样式

Style for non-ngcontent element

angular7

angular-material-7