我需要将加载的文件从文件上传模式对话框转移到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>