Angular 4 TypeScript，单击一个按钮以弹出文件打开对话框 [英] Angular 4 TypeScript, click a button to pop file open dialog

问题描述

要在单击.component.html中的跟随"按钮时打开标准文件打开对话框:

Want to open the standard file open dialog when clicking follow button in the .component.html:

<button md-fab md-tooltip="Input">
    <md-icon class="md-24">input</md-icon>
</button>

似乎打开对话框的常见方法是使用输入标签，如下所示:

seems the common way to open a dialog is to use input tag like this:

<input type="file">

，但它在屏幕上显示了其他内容.想到在.component.ts中通过单击:

but it shows extra things on screen. Thinking of do popping up in the .component.ts with a (click) in the :

<button md-fab md-tooltip="Input" (click)="onClick()">
    <md-icon class="md-24">input</md-icon>
</button

但是找不到在.ts中弹出文件打开对话框的方法，请帮忙.

but couldn't find a way to pop up file open dialog in .ts, please help.

@ angular/cli:1.0.1 节点:7.7.4 操作系统:win32 x64 @ angular/xxxx:4.0.3

@angular/cli: 1.0.1 node: 7.7.4 os: win32 x64 @angular/xxxx: 4.0.3

推荐答案

似乎您使用的是角形材质.您是否尝试遵循此示例? https://material.angular.io/components/component/dialog . 当前代码直接来自链接中的示例. 在html中:

It seems you are using angular material. Have you tried to follow this example? https://material.angular.io/components/component/dialog. Current code is taken directly from the example in the link. in the html:

<button md-button (click)="openDialog()">Launch dialog</button>

在.ts文件中:

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

这篇关于Angular 4 TypeScript，单击一个按钮以弹出文件打开对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！