css - 在 SCSS 文件 Angular 2 中访问组件变量

Question

是否可以访问为该组件定义的 .scss 文件中的组件变量？
例如:

example.component.ts

@Component({
  selector: 'example-selector',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  @Input() size: number;
}

example.component.scss

.some-class {
  width: calc(100% - {{ size }};
}

如果不是，怎么解决？

谢谢。

Answer 1

Oukei，我找到的解决方案实际上很简单，它确实允许您在样式中使用组件变量。
您基本上使用 [ngStyle] 指令来更改元素的属性。

example.component.ts

@Component({
  selector: 'example-selector',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  @Input() size: number;
}

example.component.html

<div [ngStyle]="{ 'width': 'calc(100% - ' + size + 'px)' }"></div>

或者你可以用calc来除以

<div [ngStyle]="{ 'width': 'calc(100% / ' + size + ')' }"></div>

或使用任何其他类似的给定属性。
您还可以为该元素定义类，并使用 ngStyle 定义特定(或多个)属性。

谢谢。