首頁猿問重用 Angular 9 組件

重用 Angular 9 組件

JavaScript

森欄 2023-03-24 15:29:06

我有一個(gè)文件上傳組件，app-file-upload它有一個(gè)文件類型和一個(gè)文件變量列表。一切正常，直到我想app-file-upload在同一頁面上有多個(gè)組件。我期望的是，當(dāng)我單擊第一個(gè)文件上傳按鈕時(shí)，它會(huì)填充第一個(gè)列表app-file-upload。然后當(dāng)我點(diǎn)擊第二個(gè)文件上傳按鈕時(shí)，上傳的文件將進(jìn)入第二個(gè)組件的列表。實(shí)際發(fā)生的是第二個(gè)文件列表將轉(zhuǎn)到第一個(gè)組件的列表。就好像第二個(gè)組件只是第一個(gè)組件的引用。問題：我知道角度服務(wù)是作為單例創(chuàng)建的。組件也是？？這沒有意義，因?yàn)橐赜媒M件。還是我做錯(cuò)了什么？

查看完整描述

2 回答

FFIVE

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是一個(gè)簡單的文件上傳組件，可以按您的需要工作。

此鏈接的演示：https ://angular-upload-csvx.stackblitz.io/

完整代碼和額外內(nèi)容：https://stackblitz.com/edit/angular-upload-csvx

//files.component.ts

import {Component} from '@angular/core';

@Component({

'templateUrl': './files.component.html',

'selector': 'app-files'

})

export class FilesComponent {

handleFileSelect(evt) {

var files = evt.target.files; // FileList object

var file = files[0];

}

<div>

<form>

<div>

</div>

</form>

</div>

<div>

<app-files></app-files>

<hr>

<app-files></app-files>

<hr>

<app-files></app-files>

</div>

反對(duì) 回復(fù) 2023-03-24

守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊

我發(fā)現(xiàn)了問題。我有一個(gè)用于輸入類型文件的標(biāo)簽（下面的代碼）。我需要做的就是生成一個(gè)隨機(jī)數(shù)并分配給的for和label的。idinput

<th-icon-upload></th-icon-upload>

</label>

<input type="file" id="file-{{uniqueNumber}}" [attr.multiple]="multiple ? '' : null" (change)="handleFileInput($event.target.files)" accept="{{acceptableFiles}}"

[attr.disabled]="successFilesCount >= maximumNumberOfFiles ? '' : null" />

反對(duì) 回復(fù) 2023-03-24