想在单击 .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 操作系统:win32 x64 @angular/xxxx: 4.0.3
您使用的似乎是 Angular 材质。您是否尝试过按照这个示例进行操作?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>) {}
}