Angular 4 TypeScript, haga clic en un botón para abrir el cuadro de diálogo de archivo

Desea abrir el cuadro de diálogo estándar de apertura de archivos al hacer clic en el botón de seguimiento en el .component.html:

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

parece que la forma común de abrir un cuadro de diálogo es utilizar la etiqueta de entrada de esta manera:

<input type=”file”>

pero muestra cosas extra en pantalla. Pensando en hacer emergente en el .component.ts con un (clic) en el <botón>:

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

pero couldn't encontrar una manera de pop up archivo de diálogo abierto en .ts, por favor ayuda.

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

John
Pregunta editada 6º septiembre 2017 в 8:04
Programación
angular typescript angular-material
26º abril 2017 в 2:33
No hay vistas aún
Solución

Parece que está utilizando material angular. ¿Has intentado seguir este ejemplo? https://material.angular.io/components/component/dialog. El código actual está tomado directamente del ejemplo del enlace. en el html:

Launch dialog

Y en el archivo .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) {}
}
Comentarios (0)