访问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定义特定（或多个）属性。

谢谢。