0

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

请问我该怎么办？

4

1 回答 1

0

您通常不能依赖这些_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;
}

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

于 2019-01-14T15:37:21.037 回答