angular - 使用 Angular Material 立即关闭对话框模式

Question

有人能告诉我为什么当我点击 Crear Proyecto 按钮时，模态打开但随后立即关闭吗？

https://stackblitz.com/edit/angular-gsgmu8?embed=1&file=app/portafolio/portafolio.component.ts

我正在模态中插入一个组件的内容。我正在使用 Angular Material 。

portafolio.component.ts

import { CrearProyectoComponent } from '../crear-proyecto/crear-proyecto.component';
import { MatDialog } from '@angular/material';


constructor(public dialog: MatDialog) { }

openAddModal() {
 let dialogRef = this.dialog.open(CrearProyectoComponent, {
        width: '600px'
    });
}

Answer 1

您正在使用 a 标签，这意味着，当您单击“按钮”时，它会尝试使用 href 导航至，因此您的应用会重新初始化。您可以改为将标签更改为适当的(mat)按钮:

<button class="btn btn-primary" (click)="openAddModal()">
  Crear Proyecto <i class="fas fa-plus ml-2"></i>
</button>