Question

要在.component.html中单击“关注”按钮打开标准文件打开对话框：

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

似乎打开对话框的常用方法是使用这样的输入标记：

<input type=”file”>

但它在屏幕上显示了额外的东西。想在.component.ts中使用（点击）弹出：

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

但无法在.ts中找到弹出文件打开对话框的方法，请提供帮助。

@ angular / cli：1.0.1 节点：7.7.4 os：win32 x64 @ angular / xxxx：4.0.3

Answer 1

看来你正在使用棱角分明的材料。你试过这个例子吗？ 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>) {}
}

Angular 4 TypeScript，单击一个按钮弹出文件打开对话框

1 个答案: