这很疯狂但是以下代码:
import { Component,Inject } from '@angular/core'; import { MatDialog,MatDialogRef,MatDialogConfig,MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'decline',templateUrl: './decline.component.html',styleUrls: ['../../../styles/main.css'] }) export class DeclineComponent { animal: string; name: string; config: MatDialogConfig = { disableClose: false,hasBackdrop: true,backdropClass: '',width: '250px',height: '',position: { top: '',bottom: '',left: '',right: '' } }; constructor(public dialog: MatDialog) { } openDialog(): void { let dialogRef = this.dialog.open(DialogOverviewExampleDialog,this.config); } } @Component({ selector: 'dialog-overview-example-dialog',template: ` This is nothing ` }) export class DialogOverviewExampleDialog { constructor( public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) { } }
不是(水平和垂直)模态窗口的中心,而在我到目前为止看到的所有例子中,它都很好地居中.我找不到问题……
我不得不说我正在使用’〜@ angular/material/prebuilt-themes/indigo-pink.css“.除此之外,我试图通过调整config中的位置对象来手动居中.但它不接受某些东西就像左:’50%-125px’.有什么好主意吗?
解决方法
您必须通过app.module.ts文件中的entryComponents配置对话框内容.
您可以在文档中阅读此内容:
https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-
TS:
@NgModule({ imports: [ // ... MatDialogModule ],declarations: [ AppComponent,ExampleDialogComponent ],entryComponents: [ ExampleDialogComponent ],providers: [],bootstrap: [AppComponent] }) export class AppModule() {}
我希望能解决你的问题