：before选择器动态设置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

您可以使用attrcss函数检索属性的值

https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr

component.css

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

component.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