在@component 样式中使用变量

Question

我想生成一些动态 CSS 并在 @component 的样式中使用它。 我不确切知道如何传递该变量，并且想知道是否可以这样做。 这是使用变量“stylesArray”的一段代码。

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    styles: stylesArray,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    stylesArray: string[] = [
        // Generate some dynamic css here
    ];
}

Answer 1

您可以使用主机装饰器属性来做到这一点：

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None,
    host: {
      '[style]': 'stylesArray'
    }
})
export class AppComponent {
    stylesArray: string[] = [
        // Generate some dynamic css here
    ];
}