对话框模态立即关闭 Angular Material答案

【问题标题】：Dialog modal closes instantly whit Angular Material对话框模态立即关闭 Angular Material
【发布时间】：2018-01-27 03:29:02
【问题描述】：

谁能告诉我为什么当我点击Crear Proyecto 按钮时，模态框打开但又立即关闭？

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

我在模态框内插入组件的内容。我正在使用 Angular 材质。

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'
    });
}

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

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

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

【讨论】：

没错！感谢您的解释我同意将其更改为按钮。
很奇怪，但标签对我使用 angular/material 4 有效，迁移到 6 后它停止了。用 div 替换有帮助。

【解决方案2】：

基本上，您打开 modal 和 href 会导致导航到“主页”，实际上是在刷新页面。

从您的链接中删除 href=""：

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

这是更新后的link。

【讨论】：

没错！感谢您的解释和更正。