Question

我想创建一个文件上传组件来读取文件，解析它并返回Object。这是我的主要内容。

＆＃13;

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));
  }
  
}

＆＃13;

应使用从fUp.getData接收的数据。

这是我的FlexUpload组件

＆＃13;

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
    });
  }

}

＆＃13;

直到现在getData（）在等待5秒后才返回4，我想在上传文件并解析数据时返回数据。我怎样才能做到这一点？我可以以某种方式观察数据吗？

最好的，谢谢你， P

Answer 1

我明白了。我不知道@Output。观看此视频后我可以解决它： https://youtu.be/xFYzfHGCJBw

这是我的新AppComponent

＆＃13;

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
}

}

＆＃13;

它等待onYell事件，然后调用yell（$ event）函数。在选择文件并在FlexUpload的changed（）函数中读取后传输onYell事件

＆＃13;

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
  };


}

＆＃13;

返回数据的Angular2文件上传组件

1 个答案: