Angular 2简单指令文件上传

Question

我在Angular CLI中有一些关于样式文件上传的简单指令，唯一的问题是我使用ID，并且我的指令在单页面上工作，但是当我有几个上传字段时，它当然不起作用。

这是我的代码

上传-field.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@Component({
    selector: 'app-upload-field',
    templateUrl: './upload-field.component.html',
    styleUrls: ['./upload-field.component.scss']
})
export class UploadFieldComponent implements OnInit {

    @Input() labelName = 'Blader';
    @Input() placeHolderValue = 'Kies bestand';

    constructor() { }

    ngOnInit() {
    }
    uploadButton() {
        const inputValue = (<HTMLInputElement>document.getElementById('upload-button')).value;
        const filename = inputValue.replace(/^.*\\/, '');
        (<HTMLInputElement>document.getElementById('upload-file')).value = filename;
    }

}

上传-field.component.html

<input id="upload-file" placeholder="{{placeHolderValue}}" disabled="disabled" class="form-control" />
<div class="file-upload">
  <span class="btn btn-default btn-lg">{{labelName}}</span>
  <input id="upload-button" type="file" class="form-control upload-button" name="upload_file" (change)="uploadButton()" />
</div>