在 Angular 中分离 SCSS 和 HTML

Question

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

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

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

link 到 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 文件中删除样式，但我忽略了它。

提前致谢！

Answer 1

将 test-class 添加到您的元素中：

<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

Answer 2

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

位置：绝对；

在 Angular 中分离 SCSS 和 HTML

Separate SCSS and HTML in Angular

html

css

angular

inline-styles