隐藏角度材质对话框

Question

我已将Angular材质对话框实现到我的应用程序中。但是，对话框没有显示，而是隐藏在我的组件下面。为了使这个问题有点清楚，我添加了一些图像。

Dialog components with my main component showing

Dialog components with my main component hidden

所以我的问题是如何将我的对话框放在我的视图之上？

更新：

我没有控制台错误，我按照材料网站Angular Material Dialog上的教程。所以没有额外的css或任何东西只是以下组件和代码：

我的主要组件打开对话框（EditComponent）

import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { Result } from '../Types/result';
import { ResultService } from '../result.service';
import { LanguageService } from '../language.service';
import { Router } from '@angular/router';
import { Process } from '../Types/process';
import { onLoadDown, onLoadAppear } from '../animations';
import { EditDialogComponent } from '../edit-dialog/edit-dialog.component';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css'],
  animations: [onLoadDown, onLoadAppear],
  encapsulation: ViewEncapsulation.None
})
export class EditComponent implements OnInit {
  results: Result[] = new Array();

  constructor(private resultService: ResultService, private languageService: LanguageService,
    private router: Router, public dialog: MatDialog) { }

  ngOnInit() {
    this.results = this.resultService.getResults();
    console.log(this.results);
  }

  openDialog(editResult: Result): void {
    const dialogRef = this.dialog.open(EditDialogComponent, {
      width: '250px',
      data: { result: editResult}
    });
  }


}

对话框组件（EditDialogComponent）

import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { ResultService } from '../result.service';
import { Router } from '@angular/router';
import { LanguageService } from '../language.service';

@Component({
  selector: 'app-edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class EditDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, private resultService: ResultService,
    private router: Router, private languageService: LanguageService) {
     }

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

Answer 1

当您不提供任何角度材质样式时会发生这种情况。我建议将一个导入到styles.css文件中。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

或者你可以创建自己的风格。