☰

Angular マテリアル ダイアログ コンポーネントにより、Web サイトのコンポーネントがすべて非表示になります 質問する

tag-icon • tag-icon angular material-design angular-material
Angular マテリアル ダイアログ コンポーネントにより、Web サイトのコンポーネントがすべて非表示になります 質問する

私は Angular 5 と Angular Material (最新バージョン) を使用しており、ページからダイアログを開こうとしています。開くためのボタンをクリックすると、ダイアログがコンテンツに重なってすべてを隠しているかのように、Web サイト全体が空白の背景になります。

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    moduleId: module.id,
    selector: 'app-dialog',
    templateUrl: 'dialog.component.html',
    styleUrls: ['dialog.component.scss']
})
export class DialogComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef<DialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) { }

    onNoClick(): void {
        this.dialogRef.close();
    }

    ngOnInit() {
    }

}

これはダイアログを開くメソッドです。

onSubmit() {

        const dialogRef = this.dialog.open(DialogComponent, {
            width: '250px',
            data: { name: 'Juan Manuel', animal: 'Perro' }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed');
            console.log(result);
        });
    }

更新: ダイアログがレンダリングされた後、HTML タグにクラスが追加されることがわかりました。.cdk-グローバルスクロールブロックなぜそのクラスが HTML タグに追加されるのか分かりません。

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

これがエラーの原因です。HTML タグにそのクラスがある理由を知っている人はいますか?

ベストアンサー1

最も簡単な修正方法は、ダイアログのスクロール戦略を新しいNoopScrollStrategyオブジェクトに設定することです。

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { name: 'Juan Manuel', animal: 'Perro' },
        scrollStrategy: new NoopScrollStrategy()
    });

これには追加のインポートのみが必要です:

import { NoopScrollStrategy } from '@angular/cdk/overlay';

おすすめ記事