Question

我发现我不知道唱歌

<input type="file" [multiple]="multiple" #fileInput>
<upload-drawing #fu (change)="fu.upload()" [multiple]="true"></upload-drawing>

export class DrawingUploadComponent
{

  @Input() multiple: boolean = false;
  @ViewChild('fileInput') inputEl: ElementRef;

  constructor(private http: Http) {}

  upload() {
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    if (fileCount > 0) {
      for (let i = 0; i < fileCount; i++) {
        formData.append('file', inputEl.files.item(i));
      }
      this.http
        .post('http://localhost:8080/upload', formData).toPromise().then(() => console.log('success')).catch(() => console.log('error'));
    }
  }
}

我对这些'＃'标志内部和标签感到困惑。它们是什么，将它们插入内部的目的是什么。我可以看到这是某种标识符，因为@ViewChild('fileInput')还有更多吗？

Answer 1

这些是template reference variables。

模板引用变量通常是对模板中DOM元素的引用。它也可以是对Angular组件或指令或Web组件的引用。

它们允许模板的不同部分共享数据。像

这样的一行

<input type="file" [multiple]="multiple" #fileInput>

将创建一个fileInput变量，供模板的其他部分或Angular组件使用。

Answer 2

在您的ts中，您正在使用ViewChild直接访问输入。它基本上就像在javascript中调用TextInputType.url一样。我在处理文件时使用了类似的代码。

'＃'在html元素内部签名

2 个答案: