angular - 垫子对话框不作为弹出窗口打开

Question

我正在尝试使用 Mat-Dialog 打开一个弹出窗口，但它出现在页面的左侧。

我已经按照官方材料网站https://material.angular.io/components/dialog/overview的步骤进行操作

TS

import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from '../shared/dialog/dialog.component';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  constructor(public dialog: MatDialog) {}

  signin(): void {
    this.dialog.open(DialogComponent);
  }
}

对话TS

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

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) {}

  ngOnInit(): void {
    console.log('dialog');
  }
}

应用模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BodyComponent } from './body/body.component';
import { DialogComponent } from './shared/dialog/dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    BodyComponent,
    DialogComponent
  ],
  exports: [MatDialogModule],
  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
  entryComponents: [DialogComponent],
  providers: [
    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

有什么我做错了吗？

Answer 1

在你的AppModule，为什么要尝试出口MatDialogModule？包括MatDialogModule里面你的imports和尝试。