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如何“监视”样式的一部分，从而使一个组件中应用的样式不会影响应用于另一组件中同一项目的样式。您仍然可以通过将类或属性应用于外部组件来将样式限制为作用域：

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

请注意，您的样式当然必须在全局样式表中，而不是在组件样式中。

非ngcontent元素的样式

1 个答案: