Question

我正在寻找自己的上传按钮，当文件上传时，背景将填入绿色。我不知道如何做的一些事情，在不直接使用document.getElement的情况下获取组件内部按钮的当前宽度。我需要对当前进度数进行计算以设置填充。最后，我需要数据绑定到css属性以轻松更新UI。

这样的东西有i的输入，当文件正在读取时，我将从另一个视图更新。我不明白如何使用Progress: number变量来实现this之类的内容。

我的代码对我需要实现的步骤有一个非常明确的定义，我不知道该怎么做的最大步骤是在不使用{{Progress的情况下获取组件内的<button> 1}}。

我的基本观点：

document.getElementById()

此组件的OnChange事件： 更新 - 按照此处链接的指南，但似乎没有任何事情发生。我正在更新正确的值但没有任何反应。唯一发生的事情是背景颜色确实改变但不填充。

<button [disabled]="Disabled" (click)="Clicked()" type="{{Type}}" class="btn btn-md spacing FakeClickable btn-info"><i class="fa fa-cloud-upload fa-lg"></i> {{Content}}</button>
<form>
    <input id="FileUpload-{{Content}}" [hidden]="true" type="file" name="file" (change)="FileReady($event)" />
</form>

Answer 1

如果您想访问组件类代码中的按钮，那么您正在寻找ViewChild。您的代码将如下所示：

<button [disabled]="Disabled" #uploadButton (click)="Clicked()" type="{{Type}}" class="btn btn-md spacing FakeClickable btn-info"><i class="fa fa-cloud-upload fa-lg"></i> {{Content}}</button>

这是您的模板，我们创建一个名为uploadButton的局部变量，然后使用ViewChild装饰器从我们的Component Class访问它：

import { ViewChild, ElementRef  } from '@angular/core';
// then:
@ViewChild('uploadButton') uploadButton: ElementRef;
ngOnChanges() {
   // this is how you access your button:
   this.uploadButton.nativeElement // do anything with it, this is just a usual HTML element reference
}

Angular创建进度填充上传按钮

1 个答案: