Angular 在一个页面上使用多个应用程序，但子应用程序始终将发射事件数据发送到第一个

我有一个按钮组件来导入excel数据并将数据发送到父组件

我使用两个excel导入btn组件在一个页面上将不同的数据导入到不同的aggrid

第二个excel导入btn emit总是调用第一个btn函数，但我看到其他属性都是正确的

仅发射功能不正确

（始终查看“我的费用”）

我的代码如下：

父html：

<app-ui-mainInfo></app-ui-mainInfo>
<app-ui-list-charge #myCharge></app-ui-list-charge>
<app-ui-list-item #myitem></app-ui-list-item>

second-component.html

<app-btn-xlsx-client-io #impChargeBtn
            [impBtn]="impBtn"
            [expBtn]="expBtn"
            [exportDataRow]="listExportSample"
            (importFromUser)="importFromClient($event)"
>
</app-btn-xlsx-client-io>

<ag-grid-angular #listCharge ....></ag-grid-angular>

<app-btn-xlsx-client-io #impVerifyBtn
            [impBtn]="impBtn"
            [expBtn]="expBtn"
            [exportDataRow]="listExportSample"
            (importFromUser)="importVerifyFromClient($event)"
>
</app-btn-xlsx-client-io>

<ag-grid-angular #listItem ...></ag-grid-angular>

btn-xlsx-client-io.html

<button *ngIf="impBtn != null && impBtn.isBtnVisabled == true"
    onclick="fileXls.click();" 
    [style]="(impBtn.btnStyleCss != null && impBtn.btnStyleCss.length > 0)? impBtn.btnStyleCss : null"
    [disabled]="(impBtn.isBtnDisabled == true) ? true : null">
    <span [style]="(impBtn.labelStyleCss != null && impBtn.labelStyleCss.length > 0) ? impBtn.labelStyleCss : null">
        {{impBtn.labelName}}
    </span>
</button>

<input type="file" style="display:none;" id="fileXls" name="fileXls" (change)="import($event);" accept=".xls,.xlsx" />

{{impBtn.labelName}

btn-xlsx-client-io.ts

@Input() public impBtn: iXlsBtnStyle;
@Input() public expBtn: iXlsBtnStyle;
@Input() public exportDataRow?: any;
@Output() public importFromUser? = new EventEmitter<iTransResult<any>>();
private xlsxClientService:XlsxClientIOService = new XlsxClientIOService();

import(formFile) {

        let transResult:iTransResult<any>;
        let tempList = [];
       
        // wire up file reader 
        //const target: DataTransfer = <DataTransfer>(formFile.target);
        const target: DataTransfer = <DataTransfer>(formFile.target);
        if (target.files.length !== 1) {
            transResult = new iTransResult<any>();
            transResult.errLog = [];
            transResult.errLog.push['Cannot use mutiple files.'];
            transResult.rc = 1;
            return transResult;
            //throw new Error('Cannot use multiple files');
        }
        
        
        const reader: FileReader = new FileReader();
        reader.onload = (e: any) => {
            // read workbook
            const bstr: string = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

            // grab first sheet
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];

            // save data
            tempList = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
            //console.log('tempList:', tempList);

            //AOA Transfer to Object
            transResult = this.xlsxClientService.AOAtoObject<any>(tempList, this.impBtn.bindPropertyMap);

            formFile.target.value = ""

            //this.importFromUser.emit(transResult);
          
        };

        reader.onloadend = (e:any) =>{
            //return the transfer object to parent-compoent
            this.importFromUser.emit(transResult);
        };
        
        reader.readAsBinaryString(target.files[0]);
        
    }////import

@Input（）公共impBtn:iXlsBtnStyle；
@Input（）public expBtn:iXlsBtnStyle；
@Input（）公共导出数据行？：任意；
@输出（）公共导入来自用户？=新事件发射器（）；
私有xlsxClientService:XlsxClientIOService=newxlsxclientioservice（）；
导入（formFile）{
let transResult:itranssult；
让圣堂武士=[]；
//连接文件读取器
//const target:DataTransfer=（formFile.target）；
const target:DataTransfer=（formFile.target）；
如果（target.files.length！==1）{
transResult=新的iTransResult（）；
transResult.errLog=[]；
transResult.errLog.push[“不能使用多个文件”。]；
transResult.rc=1；
返回结果；
//抛出新错误（'不能使用多个文件'）；
}
常量读取器：FileReader=newfilereader（）；
reader.onload=（e:any）=>{
//阅读工作手册
常量bstr:string=e.target.result；
常量wb:XLSX.WorkBook=XLSX.read（bstr，{type:'binary'}）；
//抢第一张
const wsname:string=wb.SheetNames[0]；
const ws:XLSX.WorkSheet=wb.Sheets[wsname]；
//保存数据
templast=（XLSX.utils.sheet_to_json（ws，{header:1}））；
//log（'templast:'，templast）；
//AOA到对象的传输
transResult=this.xlsxClientService.AOAtoObject（templast，this.impBtn.bindPropertyMap）；
formFile.target.value=“”
//this.importFromUser.emit（transResult）；
};
reader.onloadend=（e:any）=>{
//将传输对象返回到父组件
this.importFromUser.emit（transResult）；
};
reader.readAsBinaryString（target.files[0]）；
}////进口

<button *ngIf="impBtn != null && impBtn.isBtnVisabled == true"
    onclick="fileXls.click();" 
    [style]="(impBtn.btnStyleCss != null && impBtn.btnStyleCss.length > 0)? impBtn.btnStyleCss : null"
    [disabled]="(impBtn.isBtnDisabled == true) ? true : null">
    <span [style]="(impBtn.labelStyleCss != null && impBtn.labelStyleCss.length > 0) ? impBtn.labelStyleCss : null">
        {{impBtn.labelName}}
    </span>
</button>

<input type="file" style="display:none;" id="fileXls" name="fileXls" (change)="import($event);" accept=".xls,.xlsx" />

@Input() public impBtn: iXlsBtnStyle;
@Input() public expBtn: iXlsBtnStyle;
@Input() public exportDataRow?: any;
@Output() public importFromUser? = new EventEmitter<iTransResult<any>>();
private xlsxClientService:XlsxClientIOService = new XlsxClientIOService();

import(formFile) {

        let transResult:iTransResult<any>;
        let tempList = [];
       
        // wire up file reader 
        //const target: DataTransfer = <DataTransfer>(formFile.target);
        const target: DataTransfer = <DataTransfer>(formFile.target);
        if (target.files.length !== 1) {
            transResult = new iTransResult<any>();
            transResult.errLog = [];
            transResult.errLog.push['Cannot use mutiple files.'];
            transResult.rc = 1;
            return transResult;
            //throw new Error('Cannot use multiple files');
        }
        
        
        const reader: FileReader = new FileReader();
        reader.onload = (e: any) => {
            // read workbook
            const bstr: string = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

            // grab first sheet
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];

            // save data
            tempList = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
            //console.log('tempList:', tempList);

            //AOA Transfer to Object
            transResult = this.xlsxClientService.AOAtoObject<any>(tempList, this.impBtn.bindPropertyMap);

            formFile.target.value = ""

            //this.importFromUser.emit(transResult);
          
        };

        reader.onloadend = (e:any) =>{
            //return the transfer object to parent-compoent
            this.importFromUser.emit(transResult);
        };
        
        reader.readAsBinaryString(target.files[0]);
        
    }////import