如何修复我的对话框 window 不弹出 angular 模式

Question

我建立了一个姓名列表，我需要能够通过弹出窗口添加姓名。我使用 angular 材料进行设置，但对话框没有弹出，而是在页面底部打开。这是 parent ts:

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Person } from '../person'
import { PersonService } from '../person.service';
import { AddAPersonDialogComponent } from '../add-aperson-dialog/add-aperson-dialog.component';

@Component({
  selector: 'app-add-aperson',
  templateUrl: './add-aperson.component.html',
  styleUrls: ['./add-aperson.component.css']
})
export class AddAPersonComponent implements OnInit {

    person: Person;

    constructor(
        public dialog: MatDialog,
        private personService: PersonService
    ) {}

  ngOnInit(): void {
  }

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

    dialogRef.afterClosed().subscribe(result => this.personService.addPerson(result));
  }

}

这是对话框 ts:

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Person } from '../person'
import { PersonService } from '../person.service';

@Component({
  selector: 'app-add-aperson-dialog',
  templateUrl: './add-aperson-dialog.component.html',
  styleUrls: ['./add-aperson-dialog.component.css']
})
export class AddAPersonDialogComponent implements OnInit {
    
    person: Person;

  constructor(private personService: PersonService,
    public dialogRef: MatDialogRef<AddAPersonDialogComponent>) { }

  ngOnInit(): void {
  }

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

}

close() 函数运行良好：对话框已从旧页面中删除，但我需要它弹出。 Parent html:

<button class="button" (click)="openDialog()">+</button>

Child html:

<h1 mat-dialog-title>Add A Person</h1>
<div mat-dialog-content>
    <label>First Name</label>
    <input matInput [(ngModel)]="person.firstname">
    <label>Last Name</label>
    <input matInput [(ngModel)]="person.lastname">
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">Cancel</button>
  <button mat-button cdkFocusInitial>Ok</button>
</div>

Answer 1

你好，所以这可能对你帮助不大，但我有 2 件事可能值得检查，其中 1 是这样的：https://material.angular.io/components/dialog/overview

具体来说，它说您需要将其包含在您的提供商中：

providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
]

另一种可能是您被要求导入 BrowserAnimationsModule，我怀疑这可能是导致问题的原因，但没有很好的解决方法。

编辑：对于目前正为此苦苦挣扎的任何人，我学到了两件事，首先是您必须使用 ng add 安装@angular/material，因为这使您可以选择为 material 包设置主题。

第二个更重要的事情是，出于某种原因，如果你想使用这个包，你必须使用以下内容修改 package.json：

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

基于此link：https://angular.io/guide/ivy#speeding-up-ngcc-compilation

如何修复我的对话框 window 不弹出 angular 模式

How can I fix my dialog window not popping out angular modal

javascript

modal-dialog

popup

angular-material

angular