訪問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定義特定（或多個）屬性。

謝謝。