Question

想象一下，在Angular组件的my.component.scss文件中有一个SCSS mixin。

现在我在Angular app的global style.scss中导入该文件，因为我想将一些数据传递给mixin。

例如： 我-component.scss。

// Foo.js
export default function foo(n) { return n + 1 }

// Bar.js
import foo from "./foo";

 export default function bar(n) { return foo(n) * 2; }

我-component.ts

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

Angular应用程序的styles.scss。（这将在Angular.json中导入）

<pre>

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

</pre>

它按预期编译和应用程序工作，但我的“错误消息”css类可由整个应用程序访问。

Angular应该封装“错误消息”css类，它的可见性应仅限于my-component。在这种情况下，如何保持封装工作？

PS：我只是想完成这项工作：https://material.angular.io/guide/theming#theming-only-certain-components但这个问题似乎更为普遍。

提前致谢。如果需要进一步说明或代码，请告诉我。

Answer 1

主题和样式封装是两回事。 Angular只会将样式代码封装在组件的样式表中;它不会封装那里定义的任何mixins，因为必须调用mixins才能应用。你定义mixin的地方与mixin的应用位置无关 - 这取决于你。您的错误类可供整个应用访问，因为您已在主样式表中调用（＆＃39;包含＆＃39;）它。

最终你不能使用主题并将其封装，因为主题的工作方式是应用程序范围。因此，为了解决这个问题，请使用组件的选择器来限制mixin中类的范围：

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

这仍然定义了应用程序范围，但它只会影响您的组件。

此外，您不应在组件样式表中包含组件主题mixin。它们应该在他们自己的主题文件中，这样当你导入mixin用于主题时，你也不会导入 - 进入你的主应用程序样式表 - 组件的任何非主题样式。

话虽如此，您可以尝试来封装您的组件主题。您需要在组件的样式表中访问全局定义的主题，并且您可能还必须将角度材料主题实用程序导入到组件样式表中。我不确定这是否有效，而且我认为如果您为很多组件执行此操作，可能会在您的应用中添加很多样式重复。

将组件scss文件导入样式scss文件时，Angular组件的样式视图封装不起作用

1 个答案: