web-dev-qa-db-ja.com

Angular 4 TypeScript、ボタンをクリックしてファイルを開くダイアログを開く

.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

angulartypescriptangular-material
9
brewphone

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>) {}
}
7
John