如何将数据从“角材料”模态对话框传输到父组件?

时间:2020-06-15 08:11:13

标签: javascript angular angular-material

我需要将加载的文件从文件上传模式对话框转移到QuestionsComponent。 我该怎么办?我已经尝试通过@Output进行操作,但是我不明白我需要在模板中插入模态对话框组件选择器的地方。

questions.component.ts:

export class QuestionsComponent implements OnInit{
  constructor(public _modal: MatDialog, public $router: Router) {}
  ngOnInit(): void {
    while (true) {
      const _dialog = this._modal.open(FileUploadModalDialogComponent);

      const isBreak = _dialog.afterClosed().subscribe(result => {
        if (result !== undefined) {
          return true;
        }
      });
      console.log(isBreak);
      if (isBreak) { break; }
    }
  }

  loadFile(input: any) {
    const file = input.files[0];
    const fileName: string = file.name;
    if (fileName.endsWith('.tournament.json')) {
      console.log('Loading tournament file...');
      console.log('Name: ' + input.files[0].name);
      const fileReader = new FileReader();
      fileReader.readAsText(file, 'utf-8');
      let json: string | ArrayBuffer;
      fileReader.onload = () => {
        json = fileReader.result;
        if (typeof json === 'string') {
          try {
            this._modal.closeAll();
            json = JSON.parse(json);
            console.log('Loaded tournament file successfully. Redirecting...');
            this.$router.navigate(['/event']);
          } catch (e) {
            console.warn('Error loading tournament file!');
            console.error(e);
            alert('Invalid tournament file');
          }
        }
      };
    } else {
      alert('This is not a tournament file. Tournament file name must end with .tournament.json');
    }
  }
}


@Component({
  templateUrl: './file-upload.component.html',
})
export class FileUploadModalDialogComponent {}

file-upload.component.html:

<div class="main__wrap">
  <div class="file-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    <span i18n="@@choose-tournament-json-btn">Choose file</span>
    <input type="file" name="FileAttachment" id="FileAttachment" class="upload" (change)="loadNewFile($event.target)"/>
  </div>
  <p id="fileuploadurl" i18n="@@choose-tournament-json-btn-caption">Choose tournament json file on your computer.</p>
</div>

0 个答案:

没有答案
相关问题