Инкапсуляция стилевого представления углового компонента не работает, когда файл scss компонента импортируется в файл scss стилей - PullRequest
Новая
       31

Инкапсуляция стилевого представления углового компонента не работает, когда файл scss компонента импортируется в файл scss стилей

0 голосов
/ 07 июня 2018

Представьте себе, что в файле my.component.scss компонента Angular есть миксин SCSS.

Теперь я импортирую этот файл в глобальный style.scss приложения Angular, потому что я хотел бы передать некоторые данные в этот миксин.

Например: my-component.scss. 

<code><pre>
 @mixin my-component-theming($theme) {
     // Extract whichever individual palettes you need from the theme.
     $warn-palette: map-get($theme, warn);

     $warn: mat-color($primary-palette);

     .error-message {
        color: $warn !important;
      }
   }

my-component.ts 

<code><pre>

 @Component({
   selector: 'my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.scss']
})

Angles приложения styles.scss.(Это импортируется в Angular.json) 

<code><pre>
    @import '~@angular/material/theming';
    @import 'my-component.scss';

    // just imagine that $app-theme is already defined here. 
    // Not including unnecessary code to keep example simple.

    @include my-component-theming($app-theme)

Он выполняет компиляцию и работу приложения, как ожидалось, но мой класс css "error-message" доступен всему приложению.

Angular должен был инкапсулировать класс css "error-message", и его видимость должна быть ограничена только my-component.Как я могу сохранить инкапсуляцию в этом случае?

PS: Я просто пытаюсь сделать это: https://material.angular.io/guide/theming#theming-only-certain-components, но эта проблема, кажется, больше вгенерал.

Заранее спасибо.Дайте мне знать, если необходимы дальнейшие разъяснения или код.

1 Ответ

0 голосов
/ 08 июня 2018

Тематика и стиль инкапсуляции - это две разные вещи.Angular будет только инкапсулировать код стиля в таблицу стилей вашего компонента;он не инкапсулирует какие-либо миксины, определенные там, потому что миксины должны быть вызваны для применения.И где вы определяете, что миксин не имеет ничего общего с тем, где этот миксин применяется - это ваше дело.Ваш класс ошибок доступен всему приложению, потому что вы назвали его в своей основной таблице стилей.

В конечном счете, вы не можете использовать их и инкапсулировать, потому что способ работы с темами распространяется на все приложения.Поэтому, чтобы обойти это, используйте селектор вашего компонента, чтобы ограничить область действия класса в вашем миксине: 

@mixin my-component-theming($theme) {
  // Extract whichever individual palettes you need from the theme.
  $warn-palette: map-get($theme, warn);

  $warn: mat-color($primary-palette);

  my-component.error-message {
    color: $warn !important;
  }
}

Это по-прежнему определяет широкое применение стиля, но это повлияет только на ваш компонент.

Кроме того, вам не следует включать миксины тем оформления ваших компонентов в таблицы стилей компонентов.Они должны быть в их собственном файле тем, чтобы при импорте миксина для темы вы также не импортировали - в основную таблицу стилей приложения - какие-либо стили, не связанные с темой для компонента.

При этомВы можете попытаться инкапсулировать темы вашего компонента.Вам нужно будет получить доступ к своей глобальной теме в таблице стилей вашего компонента, и вам также может понадобиться импортировать утилиты тематического углового материала в вашу таблицу стилей компонента.Я не уверен, сработает ли это, и я думаю, что это может добавить много дублирования стилей в вашем приложении, если вы сделаете это для большого количества компонентов.

...