Angular 4 TypeScript，点击按钮弹出文件打开对话框。

Question

当点击.follow按钮时，想要打开标准的文件打开对话框，该怎么做呢？

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

看起来打开对话框的普遍方法是使用类似于以下的输入标签：

<input type=”file”>

但它在屏幕上显示了额外的东西。考虑在.component.ts中使用（click）进行弹出：

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

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

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

- brewphone

---

可能是重复的问题：如何在不使用<input>标签的情况下，通过JavaScript打开文件对话框。 - Heretic Monkey

这里的答案更简单。感谢大家的帮助。 - brewphone

Answer 1

看起来你正在使用 Angular Material。你尝试过按照这个例子进行操作吗？https://material.angular.io/components/component/dialog。 当前的代码直接来自于链接中的示例。 在 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>) {}
}

- John