Angular2 Dateiupload-Komponente, die Daten zurückgibt

Question

Ich möchte eine Dateiupload-Komponente erstellen, die die Datei liest, analysiert und das Objekt zurückgibt. Dies ist meine Hauptkomponente.

import { Component,OnInit } from '@angular/core'; 
 
import { Parameter } from './parameter.interface'; 
 
import { FlexUpload } from './flexUpload.component'; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    template: ` 
 
    <app-flexUpload></app-flexUpload> 
 
    ` 
 
}) 
 
export class AppComponent implements OnInit { 
 

 
    fUp : FlexUpload = new FlexUpload(); 
 

 
    ngOnInit(){ 
 
    this.fUp.getData().then(data => console.log(data)); 
 
    } 
 
    
 
}

Die empfangenen Daten von fUp.getData verwendet werden soll.

Das ist mein FlexUpload Komponente

import { Component,ElementRef, Input, ViewChild,Injectable } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-flexUpload', 
 
    templateUrl : './flexUpload.component.html', 
 
}) 
 

 
@Injectable() 
 
export class FlexUpload{ 
 

 
    @ViewChild('fileInput') inputEl: ElementRef; 
 

 

 
    changed(){ 
 
    let res: HTMLInputElement = this.inputEl.nativeElement; 
 
    let myFile = res.files[0]; 
 

 
    var data; 
 

 
    data = io.readZipFile([myFile]); 
 
    console.log(data); //--> this works, want to return it in getData() 
 
    
 

 
    }; 
 

 
    getData():Promise<any>{ 
 
    return new Promise(resolve => { 
 
    setTimeout(()=> resolve(4),5000);// instead of 4, I want to return data when it is parsed 
 
    }); 
 
    } 
 

 
}

Bis jetzt getData() gibt nur 4 nach 5 Sekunden warten, ich möchte Daten zurückgeben, wenn eine Datei und die Daten hochgeladen wurde wurde geparst. Wie kann ich das tun? Kann ich Daten irgendwie beobachten?

Beste und Dank im Voraus, P

Answer 1

ich es herausgefunden. Ich war mir der @Output nicht bewusst. Ich könnte es nach dem Anschauen dieses Videos lösen: https://youtu.be/xFYzfHGCJBw.

Das ist mein neues AppComponent

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

 
@Component({ 
 
    selector: 'app-root', 
 
    template: ` 
 
    <app-flexUpload (onYell)="yell($event)"></app-flexUpload> 
 
    ` 
 
}) 
 
export class AppComponent implements OnInit { 
 
    
 
yell(data:any){ 
 
    console.log(data);//data comes out here 
 
} 
 

 
}

Es wartet auf die onYell Ereignis und ruft dann die yell ($ event) -Funktion. Das onYell Ereignis übertragen wird, nachdem eine Datei

declare var io:any; 
 

 
import { Component,ElementRef, Input, ViewChild,Injectable,Output,EventEmitter } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-flexUpload', 
 
    template: `<input type="file" [multiple]="multiple" #fileInput (change)="changed()" >`, 
 
}) 
 

 
@Injectable() 
 
export class FlexUpload{ 
 

 
    @ViewChild('fileInput') inputEl: ElementRef; 
 
    @Output() onYell = new EventEmitter(); 
 

 
    changed(){// is called when a file is selected 
 
    let res: HTMLInputElement = this.inputEl.nativeElement; 
 
    let myFile = res.files[0]; 
 

 
    var data; 
 

 
    data = io.readZipFile([myFile]);//uses HTML5 file api 
 
    this.onYell.emit(data);// emit data 
 
    }; 
 

 

 
}