Question

我对angular-material2组件非常满意，但有一些我不理解的奇怪行为，并且他们没有适当的文档，特别是对于组织和定制他们的组件。

＆＃xA; ＆＃xA;

我的项目如下：

＆＃xA;＆＃xA;

  .src＆＃xA; --app＆＃XA; --components＆＃XA; --login组分＆＃XA;登录-component.html＆＃XA;登录-component.scss＆＃XA;登录-component.js＆＃XA; --login组分＆＃XA;家庭component.html＆＃XA;家庭component.scss＆＃XA;家庭component.js＆＃XA; - 依此类推......＆＃xA; app.component.html＆＃XA; app.component.scss＆＃XA; app.component.ts＆＃XA; app.module.ts＆＃XA; app.routing.ts＆＃XA; --assets＆＃XA; --environments＆＃XA; --scss＆＃XA; styles.scss＆＃XA; _material2-theme.scss＆＃XA; _variables-SCSS＆＃XA; _utilities.scss＆＃XA; _reset.scss＆＃XA;图标＆＃XA;的index.html＆＃XA;等等......＆＃xA;

＆＃xA;＆＃xA;

在angular-cli.json中，我修改了样式以查看scss / style.scss < /p>

...
"styles“：[＆＃xA; “SCSS / styles.scss” ＆＃XA; ]＆＃xA; ...＆＃xA;

＆＃xA;＆＃xA;

_material2-theme.scss看起来像：

＆＃xA;＆＃ xA;

  ////////////////////// *主题* /自定义蓝色主题* /＆＃xA; @import'〜@ angular /材料/主题';＆＃xA; @include mat-core（）;＆＃xA; $ app-primary：mat-palette（$ mat-light-blue）;＆＃xA; $ app-accent：mat-palette （$ mat-light-blue，A200，A100，A400）;＆＃xA; $ app-theme：mat-light-theme（$ app-primary，$ app-accent）;＆＃xA; @include angular-material -theme（$ app-theme）;＆＃xA;＆＃xA; / *默认调色板forground / background * /＆＃xA; $ light-foreground-palette：map-get（$ app-theme，foreground）;＆ #xA; $ light-background-palette：map-get（$ app-theme，background）;＆＃xA;＆＃xA; $ primary：map-get（$ app-theme，primary）;＆＃xA; $重音：map-get（$ app-theme，accent）;＆＃xA;

＆＃xA;＆＃xA;

和style.scss内部我要导入所有要编译的内容使用scss cli编译器

＆＃xA;＆＃xA;

  ////////////////////// * CUSTOM * /＆＃ xA; @import“_material2-theme.scss”;＆＃xA; @import“_reset.scss”;＆＃xA; @import“_utilities.scss”;＆＃xA; ////////////////////// *组件* /＆＃xA; @import“~app / components / login / login.component.scss”;＆＃xA;

＆＃xA;＆＃xA;

我的问题是在scss之后编译我们在html头部有许多样式标签，其中一些重复，看起来像：

＆＃xA;＆＃xA;

所有内容似乎都是在头部添加的一种样式中编译的（具有类型属性的样式），然后在每个css组件中以每个单独的样式分割每个scss组件在头上，这很奇怪。我做错了什么或只是方式是工作材料2？

＆＃xA;

Answer 1

您看到的行为是由为物料组件定义的ViewEncapsulation.Emulated引起的。

首先，您不需要将组件的样式添加到全局样式"scss/styles.scss"：

//////////////////////* COMPONENTS */
@import "~app/components/login/login.component.scss";

如果你这样做，除了你的样式被复制之外，你将失去样式封装，因为为components/login/login.component.scss添加的样式将变为全局。

现在，问题为什么有很多style元素。当您使用ViewEncapsulation.Emulated并且它是默认视图封装模式时，Angular会将每个组件的样式放入其自己的style标记中，并将属性添加到组件模板内的元素。在材质中，所有组件都使用模拟封装模式，因此对于每个组件，都会添加style标记。

如果您为组件添加@Component({..., encapsulation: ViewEncapsulation.Native })，您会看到组件的style将被删除。

Here is the logic添加了style代码：

export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
  ...
  private _addStylesToHost(styles: Set<string>, host: Node): void {
    styles.forEach((style: string) => {
      const styleEl = this._doc.createElement('style');  <--- creates a style element
      styleEl.textContent = style;
      this._styleNodes.add(host.appendChild(styleEl));
    });
  }

Answer 2

您头脑中有多个component标记可能是您的每个style与某些外部不同的css链接或您在相关的HTML网页上编写了内部css。

Answer 3

我认为这不是因为每个组件都有单独的样式。此问题与ngularjs-material中的问题类似。

Angular-material 在JavaScript中包含一些默认主题 css 作为const变量。

您可以在此问题上阅读更多内容，的 https://stackoverflow.com/questions/33466779/how-to-get-rid-off-angular-material-extra-styles-and-css-linked-by-it-forcefull

Answer 4

在Angular的Material design中，样式表分为：

style - 从组件链接的边距，填充等等
主题 - 主要是使用主题scss构建的颜色
排版 - 字体＆amp;使用排版scss

这导致类似的选择器，但内部具有不同的属性。

我认为这是带有角度cli或webpack的实时开发服务器，它会动态加载css，从而导致样式标记重复。我相信这不会在生产版本中发生。

PS。你有什么事情可以在其他任何事情之后添加_reset.scss。

Answer 5

在开发过程中，angular cli或webpack将每个组件的每个css / scss文件编译为HTML页面中的样式标记。

即，在您的情况下：login-component.scss，home-component.scss将在HTML页面中的单独样式标记内加载。

所有这些都将被编译成单个css文件，并将在生产conf中的index.html中链接。

所以我也认为它的角度有效！

目前我发现在生产版本 ng build --prod 中只生成了一个文件。

头部重复的样式和许多<style>元素

5 个答案: