[英]Angular material dialog is hidden
我已經在應用程序中實現了Angular材質對話框。 但是,該對話框沒有顯示,而是隱藏在我的組件下方。 為了使這個問題有點清楚,我添加了一些圖像。
所以我的問題是如何將對話框置於視圖之上?
更新:
我沒有控制台錯誤,我遵循了材料網站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();
}
}
當您不提供任何角度材料樣式時,就會發生這種情況。 我建議將一個導入您的styles.css文件。
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
或者,您可以創建自己的樣式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.