web-dev-qa-db-fra.com

Angular 4 TypeScript, cliquez sur un bouton pour ouvrir le dialogue de fichier

Voulez-vous ouvrir la boîte de dialogue d'ouverture de fichier standard lorsque vous cliquez sur le bouton Suivant dans le fichier .component.html:

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

il semble que la manière habituelle d’ouvrir une boîte de dialogue consiste à utiliser une balise d’entrée comme celle-ci:

<input type=”file”>

mais il montre des choses supplémentaires à l'écran. Vous songez à faire apparaître le .component.ts avec un (clic) dans le:

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

mais n'a pas pu trouver un moyen d'ouvrir une boîte de dialogue d'ouverture de fichier dans .ts, veuillez aider.

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

angulartypescriptangular-material
9
brewphone

Il semble que vous utilisiez angular matériau. Avez-vous essayé de suivre cet exemple? https://material.angular.io/components/component/dialog . Code actuel est tiré directement de l'exemple dans le lien. dans le HTML:

<button md-button (click)="openDialog()">Launch dialog</button>

Et dans le fichier .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