title: using multi-app on one page, but child sent emit event always data to first
body: <p>I have a button component to import excel data and emit data to parent-component.</p>
  <p>I using two excel-import-btn components to import different data to different aggrid on single page.</p>
  <p>the second excel-import-btn emit always call the first btn function, but i saw other attributes are correct,</p>
  <p>only emit function is incorrect.</p>
  <p>(always see 'my charge')</p>
  <p>my code as below:</p>
  <p>parent html:</p>
  <pre><code>&lt;app-ui-mainInfo&gt;&lt;/app-ui-mainInfo&gt;
  &lt;app-ui-list-charge #myCharge&gt;&lt;/app-ui-list-charge&gt;
  &lt;app-ui-list-item #myitem&gt;&lt;/app-ui-list-item&gt;
  </code></pre>
  <p>first-component.html</p>
  <pre><code>&lt;app-btn-xlsx-client-io #impChargeBtn
              [impBtn]=&quot;impBtn&quot;
              [expBtn]=&quot;expBtn&quot;
              [exportDataRow]=&quot;listExportSample&quot;
              (importFromUser)=&quot;importFromClient($event)&quot;
  &gt;
  &lt;/app-btn-xlsx-client-io&gt;
  
  &lt;ag-grid-angular #listCharge ....&gt;&lt;/ag-grid-angular&gt;
  </code></pre>
  <p>first-component.ts:</p>
  <pre><code>importFromClient(event){
         console.log('my charge');
         this.refreshCharge(event); //refresh aggrid list of Charge
  }
  </code></pre>
  <p>second-component.html</p>
  <pre><code>&lt;app-btn-xlsx-client-io #impVerifyBtn
              [impBtn]=&quot;impBtn&quot;
              [expBtn]=&quot;expBtn&quot;
              [exportDataRow]=&quot;listExportSample&quot;
              (importFromUser)=&quot;importVerifyFromClient($event)&quot;
  &gt;
  &lt;/app-btn-xlsx-client-io&gt;
  
  &lt;ag-grid-angular #listItem ...&gt;&lt;/ag-grid-angular&gt;
  </code></pre>
  <p>second-component.ts</p>
  <pre><code>importVerifyFromClient(event){
             console.log('my item');
             this.refreshItem(event);  //refresh aggrid list of Items
  }
  </code></pre>
  <p>btn-xlsx-client-io.html</p>
  <pre><code>&lt;button *ngIf=&quot;impBtn != null &amp;&amp; impBtn.isBtnVisabled == true&quot;
      onclick=&quot;fileXls.click();&quot; 
      [style]=&quot;(impBtn.btnStyleCss != null &amp;&amp; impBtn.btnStyleCss.length &gt; 0)? impBtn.btnStyleCss : null&quot;
      [disabled]=&quot;(impBtn.isBtnDisabled == true) ? true : null&quot;&gt;
      &lt;span [style]=&quot;(impBtn.labelStyleCss != null &amp;&amp; impBtn.labelStyleCss.length &gt; 0) ? impBtn.labelStyleCss : null&quot;&gt;
          {{impBtn.labelName}}
      &lt;/span&gt;
  &lt;/button&gt;
  
  &lt;input type=&quot;file&quot; style=&quot;display:none;&quot; id=&quot;fileXls&quot; name=&quot;fileXls&quot; (change)=&quot;import($event);&quot; accept=&quot;.xls,.xlsx&quot; /&gt;
  </code></pre>
  <p>btn-xlsx-client-io.ts</p>
  <pre><code>@Input() public impBtn: iXlsBtnStyle;
  @Input() public expBtn: iXlsBtnStyle;
  @Input() public exportDataRow?: any;
  @Output() public importFromUser? = new EventEmitter&lt;iTransResult&lt;any&gt;&gt;();
  private xlsxClientService:XlsxClientIOService = new XlsxClientIOService();
  
  import(formFile) {
  
          let transResult:iTransResult&lt;any&gt;;
          let tempList = [];
         
          // wire up file reader 
          //const target: DataTransfer = &lt;DataTransfer&gt;(formFile.target);
          const target: DataTransfer = &lt;DataTransfer&gt;(formFile.target);
          if (target.files.length !== 1) {
              transResult = new iTransResult&lt;any&gt;();
              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) =&gt; {
              // 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&lt;any&gt;(tempList, this.impBtn.bindPropertyMap);
  
              formFile.target.value = &quot;&quot;
  
              //this.importFromUser.emit(transResult);
            
          };
  
          reader.onloadend = (e:any) =&gt;{
              //return the transfer object to parent-compoent
              this.importFromUser.emit(transResult);
          };
          
          reader.readAsBinaryString(target.files[0]);
          
      }////import
  </code></pre>