kątowe 4 maszynopis, kliknij przycisk, aby otworzyć okno dialogowe pop plik

Question

Chcesz otworzyć standardowy plik otwarty dialogowe po kliknięciu przycisku podążać .component.html:

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

wydaje wspólną drogę, aby otworzyć okno dialogowe jest Aby użyć tagu wejściowego w ten sposób:

<input type=”file”> 

, ale pokazuje dodatkowe rzeczy na ekranie. Myśląc o nie pojawiały się w .component.ts z (kliknięcie) w:

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

ale nie mógł znaleźć drogę do pop up dialogowego Otwieranie pliku w .TS, proszę o pomoc.

@ kątowej/CLI: 1.0.1 węzeł: 7.7.4 OS: Win32 x64 @ kątowe/xxxx: 4.0.3

Answer 1

Wydaje używasz materiału kątową. Czy próbowałeś wykonać ten przykład? https://material.angular.io/components/component/dialog. Bieżący kod jest pobierany bezpośrednio z przykładu w linku. w HTML:

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

A w .TS Plik:

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