2017-05-24 1 views
2

질문과 마찬가지로 대화 상자가 가운데가 아닌 화면 아래에 나타납니다. 그것은 또한 클릭 할 때 닫히지 않고 오히려 내가 탈출 할 때마다 닫힙니다. 페이지의 나머지 부분도 비활성화되거나 회색으로 표시되지 않으므로 스택을 쌓을 수 있습니다 (아래 참조). 내가 예와 같이 기본적으로 동일한 코드를 사용하고모달/대화 상자가 화면 하단에 열리고 제대로 작동하지 않습니다.

enter image description here

import {Component} from '@angular/core'; 
import {MdDialog, MdDialogRef} from '@angular/material'; 

@Component({ 
    selector: 'dialog-overview-example', 
    template: '<button md-button (click)="openDialog()">Open dialog</button>' 
}) 
export class DialogOverviewExample { 
    constructor(public dialog: MdDialog) {} 

    public openDialog(): void { 
     this.dialog.open(BasicDialog); 
    } 
} 

@Component({ 
    selector: 'dialog-overview-example-dialog', 
    template: "<p> Hi, I'm a dialog! </p>", 
}) 
export class BasicDialog {} 

나는 나의 수입이 올바른지 생각하지만, 여기에 그들이있다 :

imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot(ROUTES, {useHash: true}), 
    MdDialogModule, 
    BrowserAnimationsModule, 
    ReactiveFormsModule, 
    FormsModule, 
    CommonModule 
], 

참고 콘솔에 오류나 경고가 없으며 CSS를 비활성화 해 보았습니다.

누구나 전에 본적이 있습니까?

+1

당신이 당신의 모듈에서 일부 중복 수입이있다. Angular가 어떻게 동작하는지 잘 모르겠지만'BrowserAnimationsModule'을 두 번 가져 왔으니 정리 해보고 무슨 일이 일어날 지 알겠습니까? – joh04667

+0

좋은 소식이지만, 불행히도 문제가 해결되지 않았습니다. 감사. –

+2

머리가 위로 올라가면'FormsModule'을 두 번 가져 왔습니다. – joh04667

답변

3

이 문제는 내가 CSS를 가져 오는 방법과 관련되어 나타납니다. 이전에 scss 파일로 가져 오려고했습니다.

@import '../../node_modules/@angular/material/prebuilt-themes/purple-green.css'; 

저는 스타일링을 가져 왔으므로 충분하다고 생각합니다. 분명히, 당신은 당신의 index.html에 CSS를 가져와야 :

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 

를 그래서 거기입니다. 돌이켜 보면, 처음부터 분명 했어야했지만, 제가 말했듯이, 실제로 스타일을 수입했기 때문에 제대로 가져 왔다고 생각했습니다. 또한 축소 된 버전을 가져 오려고 시도했지만 작동하지 않았습니다. index.html을 각 자료는 아래의 링크를 추가의

0

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
관련 문제