Angular自定义弹窗组件内容显示后消失问题求助

你遇到的弹窗内容显示后随即消失的问题，主要有两个核心原因：

1. 误用Angular Material指令：你在自定义Popup组件中使用了mat-dialog-close指令，该指令仅适配Angular Material官方的MatDialog服务打开的对话框，在你用*ngIf手动控制显示的组件中，这个指令无法正常工作，甚至会触发异常的状态变更逻辑。
2. 缺少明确的状态控制逻辑：你的弹窗显示依赖showPopup变量，但没有绑定对应的关闭逻辑，且可能存在事件冒泡导致的意外状态重置。

步骤1：修复Popup组件的关闭逻辑 #

修改Popup.component.ts，添加用于通知父组件关闭的输出事件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent{
  @Input() content: any;
  @Output() close = new EventEmitter<void>(); // 添加关闭事件输出
}

修改Popup.component.html，移除无效的mat-dialog-close，替换为自定义点击事件：

<div class="popup">
    <div class="popup-content">
      <mat-dialog-actions>
        <img src="../../../assets/images/closeIcon.png" 
             class="edit-icon" 
             style="cursor: pointer; padding-left: 10px;"
             (click)="close.emit()">
      </mat-dialog-actions>
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
</div>

步骤2：完善父组件的状态控制 #

在show-one-task.component.ts中添加showPopup变量和对应的打开/关闭方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-show-one-task',
  templateUrl: './show-one-task.component.html',
  styleUrls: ['./show-one-task.component.css']
})
export class ShowOneTaskComponent {
  showPopup = false;

  openPopup($event: MouseEvent) {
    $event.stopPropagation(); // 阻止事件冒泡，避免意外触发其他逻辑
    this.showPopup = true;
  }

  closePopup() {
    this.showPopup = false;
  }

  // 保留你已有的deleteTask、getStatusName、getPriorityName等方法
}

修改父组件模板，绑定关闭事件并优化点击逻辑：

<div class="container" #container>
    <h2> {{task.title}} 
        <img src="../../../assets/images/edit.png" 
             class="edit-icon" 
             style="width: 20px; height: 20px; cursor: pointer; padding-left: 10px;"
             (click)="openPopup($event)"> 
        <img src="../../../assets/images/icons8-delete-64.png" 
             style="width: 20px; height: 20px; cursor: pointer; padding-left: 5px;"
             (click)="deleteTask()"> 
    </h2>
    <!-- 保留你已有的任务信息展示代码 -->
    
    <app-popup [content]="popupContent" *ngIf="showPopup" (close)="closePopup()">
    </app-popup>

    <ng-template #popupContent>
        <!-- 保留你已有的弹窗内容代码 -->
    </ng-template>
</div>

步骤3：排查额外影响因素 #

检查show-one-task.component.ts中的其他方法（比如deleteTask），确保没有意外修改showPopup变量的逻辑；同时确认你的CSS样式中没有设置popup元素的display: none或其他隐藏规则。

内容的提问来源于stack exchange，提问作者mimi_ra