각도 4 타이프 라이터,

가 .component.html에 나온 버튼을 클릭하면 표준 파일 열기 대화 상자를 열려면 파일 대화 상자 열기 팝업 버튼을 클릭각도 4 타이프 라이터,

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

것은 대화입니다 열 수있는 일반적인 방법을 보인다 다음과 같이 입력 태그를 사용하십시오 :

<input type=”file”>

그러나 이것은 화면에 여분의 것들을 보여줍니다.

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

을하지만 .TS에서 파일 열기 대화 상자를 팝업 할 수있는 방법을 찾을 수 없습니다, 도와주세요 :의에 (클릭)으로 .component.ts에 진열 할 생각. 각도/CLI @

: 1.0.1 노드 : 7.7.4 OS : Win32에서의 64 @ 각도/XXXX : 그것은 당신이 각 재료를 사용하는 것 4.0.3

출처

2017-04-26 brewphone

[\ * 없이 자바 스크립트 \ *에서 파일 대화 상자]의 사용 가능한 복제 (http://stackoverflow.com/questions/8385758/file-dialog-from-javascript-without-input) –

[answer] (http://stackoverflow.com/a/35209681/1464938) 여기가 더 간단합니다. 도와 주셔서 감사합니다. – brewphone

또한 도움이 될 수도 있습니다 https://www.code-sample.com/2017/11/angular-4-open-dialog-box-on-click.html –

. 이 예제를 따르려고 했습니까? https://material.angular.io/components/component/dialog. 현재 코드는 링크의 예에서 직접 가져옵니다.

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

그리고 .TS에

가 파일 : html로에서

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

출처

2017-04-26 14:38:36 John

고맙습니다. – brewphone

각도 4 타이프 라이터,

답변

관련 문제