Стиль для не ngcontent элемента - PullRequest
Новая
       5

Стиль для не ngcontent элемента

0 голосов
/ 11 января 2019

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

Что мне делать, пожалуйста?

1 Ответ

0 голосов
/ 14 января 2019

Обычно вы не можете полагаться на атрибуты _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;
}

Обратите внимание, что ваш стиль должен быть в глобальной таблице стилей, а не в стиле компонента.

...