質問のように、画面の中央に表示されるのではなく、画面の下部にダイアログが表示されます。それはまたクリックではなく、むしろ私がエスケープを押すたびに閉じる。ページの残りの部分も無効になっていないか、グレー表示されていないので、それらをスタックすることができます(下記参照)。私は例のように、基本的にはまったく同じコードを使用していモーダル/ダイアログが画面の下部で開き、正しく動作しない
は
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を無効にしようとしました。
誰でもこれまでに見たことがありますか?
あなたはモジュール内のいくつかの重複輸入を持っています。 Angularがこれでどのように動作するのかよく分かりませんが、 'BrowserAnimationsModule'を2回インポートしているので、それをクリーンアップして何が起こるか見てみることができますか? – joh04667
良いキャッチは残念ながら問題を解決しませんでした。ありがとう。 –
もう一つは、FormsModuleが2回インポートされています。 – joh04667