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

<强> 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

Answer 2

您可以在要装饰的div之前添加额外的DOM元素，而不是使用css和：before选择器。

<label>{{label}}</label>
<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>

动态角度设置css：选择器之前

2 个答案: