css - :before selector 的 Angular 动态设置 css

Question

我需要动态标记上传按钮。到目前为止我的代码:

<style>
   .file_upload_wrap.background_file:before {
    content: {{label}};  /* of course does not work */
  } 
</style>

<div class="file_upload_wrap background_file imgFormButton">
    <input type="file" class="file_upload" (change)="uploadFile($event, file)" name="file" id="file" [(ngModel)]="model.file"
      #file="ngModel">
</div>

如何动态设置内容？

Answer 1

您可以使用 attr用于检索属性值的 css 函数

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

组件.css

.file_upload_wrap.background_file:before {
    content: attr(data-content);  
} 

组件.html

<div class="file_upload_wrap background_file imgFormButton" [attr.data-content]="label">
    <input type="file" class="file_upload" (change)="uploadFile($event, file)" name="file" id="file" [(ngModel)]="model.file"
      #file="ngModel">
</div>

编辑:stackblitz 显示示例
https://stackblitz.com/edit/angular-muysky?file=app%2Fapp.component.ts