Я обнаружил, что мне неизвестно
<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'));
}
}
}
Im путают с этими знаками "#" внутри и тегами. Каковы они, какова цель их вставки. Я вижу, что это какой-то идентификатор из-за @ViewChild('fileInput')
есть ли в нем больше?
Это ссылочные переменные шаблона.
Контрольная переменная шаблона часто является ссылкой на элемент DOM внутри шаблона. Он также может быть ссылкой на угловой компонент или директиву или веб-компонент.
Они позволяют разным частям вашего шаблона делиться данными. Линия, подобная
<input type="file" [multiple]="multiple" #fileInput>
создаст переменную fileInput
которая будет потребляться другими частями вашего шаблона или вашим угловым компонентом.
В вашем ts вы получаете вход непосредственно с помощью ViewChild. Это в основном как вызов document.getElementById
в javascript. Я использовал аналогичный код, когда разбирался с файлами.