角度作成のアップロードのアップロードボタン

Question

ファイルをバックグラウンドでアップロードしている間に緑色で表示される自分のアップロードボタンを作成します。私がどのように行うか分からないことのいくつかは、document.getElementを直接使用せずに、コンポーネントの内部のボタンの現在の幅を取得します。塗りつぶしを設定するには、現在の進行状況を計算する必要があります。最後に、簡単にUIを更新するために、CSSプロパティにデータバインドする必要があります。

このようなものはProgress: numberという入力があります。このファイルはファイルが読み込まれている間に別のビューから更新されます。私はProgress変数を使用してthisのようなものを実現する方法を理解していません。

私のコードは、達成するために必要なステップのかなり明確な定義を持っています。私は方法がわからない最大のステップは、document.getElementById()を使わずにコンポーネント内に<button>を保有することです。

私の基本的なビュー：

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

このコンポーネントのOnChangeイベント： UPDATE - ここにリンクされ、ガイドに従うが、何も起こらていないようにみえます。正しい値を更新していますが、何も起こりません。唯一起こることは、背景色が変化しますが、塗りつぶされないことです。

ngOnChanges(changes: SimpleChanges) 
    { 
    if (changes["Progress"] && changes["Progress"].currentValue != undefined) 
    { 
     if (this.Progress != 100) 
     { 
     var thingy = this.fileBtn.nativeElement as HTMLButtonElement; 
     // Remove the btn-info class from the button 
     thingy.classList.remove('btn-info'); 
     // Get the current width of the button 
     var curWidth = thingy.clientWidth; 
     // Set the buttons background color to green 
     //thingy.classList.add('btn-success'); 
     thingy.style.backgroundColor = "yellow"; 
     // Set the background fill percentage to Progress 
     thingy.style.backgroundSize = `${this.Progress}% 100%`; 
     thingy.style.backgroundPosition = `0 ${curWidth}px`; 
     } else 
     { 
     var thingy = this.fileBtn.nativeElement as HTMLButtonElement; 
     thingy.classList.remove("btn-info", "btn-success"); 
     thingy.classList.add("btn-info"); 
     thingy.style.backgroundColor = ""; 
     thingy.style.backgroundSize = `${this.Progress}% 100%`; 
     thingy.style.backgroundPosition = `0 ${curWidth}px`; 
     } 
    } 
    } 

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デコレータを使用して、当社のコンポーネントクラスからアクセスされます：

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 
}