Angular: 动态设置@Component 的样式

Question

Angular 13

在我的 @Component 上，我为 动态值 设置了此设置。不起作用

styles: [
    `
        .k-daterangepicker .k-dateinput {
            width: {{myWidth}};
        }
    `,
],

如何将 .k-daterangepicker .k-dateinput 更改为仅用于 @Component 的动态宽度？

Answer 1

如果您的组件模板看起来像这样：

<div class="k-daterangepicker k-dateinput">
    ...
</div>

您可以像这样添加样式绑定：

...
<div class="k-daterangepicker k-dateinput" [style.width]="inputWidth">
    ...
</div>
...

在模板的打字稿代码中，您可以通过多种不同的方式更改 inputWidth 属性（示例如下）：

...
export class MyComponent {
    @Input() inputWidth: string = '450px'; // Defaults to 450px
    ...
}

Angular: Setting Styles on @Component dynamically