2017-05-24 15 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'を2回インポートしているので、それをクリーンアップして何が起こるか見てみることができますか? – joh04667

+0

良いキャッチは残念ながら問題を解決しませんでした。ありがとう。 –

+2

もう一つは、FormsModuleが2回インポートされています。 – joh04667

答えて

3

この問題は、どのように私がcssをインポートしていたかで分かりました。以前はscssファイルにインポートしていました:

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

私はスタイリングをインポートしましたが、これで十分だと思っていました。

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

だからそれは:どうやら、あなたはあなたのindex.htmlでCSSをインポートする必要があります。振り返ってみると、当初から明らかになっていたはずだったが、私が言ったように、スタイルが実際にインポートされたので、正しくインポートされたと仮定した。また、ミニバージョンをインポートしようとしましたが、それも動作しませんでした。 index.htmlの角度材料に次のリンクを追加で

0

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
関連する問題