在 Angular 中分离 SCSS 和 HTML答案

【问题标题】：Separate SCSS and HTML in Angular在 Angular 中分离 SCSS 和 HTML
【发布时间】：2022-01-11 23:50:05
【问题描述】：

在 Angular2 项目中，我需要对按钮应用一些 CSS。我想在 .html 中添加一个类并在 .scss 文件中描述所有样式属性，但不幸的是，这个元素“没有”看到该类。但是，只要我在 .html 文件中添加与内联样式相同的样式 - 一切正常。

我想替换这段代码（来自下面的 sn-p，第 5 行） [ngStyle]="{ position: 'absolute', 'z-index': '10', right: '0' }"

通过这个class="test-class" 并使用 .scss 文件中 test-class 的数据。

stackblitz 的链接 https://stackblitz.com/edit/angular-ivy-avvwha?file=src%2Fapp%2Fapp.component.html

.html

 <div>
  <gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
      <div
        [ngStyle]="{ position: 'absolute', 'z-index': '10', right: '0' }"
      >
        <button mat-mini-fab>
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <ng-container>
        <div class="outline">
          <div class="header">
            <div class="header-text">Text</div>
          </div>
        </div>
      </ng-container>
    </gridster-item>
  </gridster>
</div>

.scss

.test-class {
  position: 'absolute';
  z-index: 10;
  right: 0;
}

也许还有其他选项可以从 .html 文件中删除样式，但我忽略了它。

提前谢谢你！

【问题讨论】：

标签： html css angular inline-styles

【解决方案1】：

将测试类添加到您的元素：

<div class="test-class">
  <button mat-mini-fab>
    <mat-icon>delete</mat-icon>
  </button>
</div>

其次是你的风格应该只是absolute，而不是'absolute'：

.test-class {
  position: absolute;
  z-index: 10;
  right: 0;
}

请看这里：https://stackblitz.com/edit/angular-ivy-z8wfaj?file=src%2Fapp%2Fapp.component.scss

【讨论】：

【解决方案2】：

在 Scss 文件中.. 你把位置：'绝对'。 abosulte 不应该是字符串。

位置：绝对；

【讨论】：

谢谢！完全忽略了它