Angular 5：点击子组件关闭按钮移除子组件的问题排查

看起来你碰到了Angular组件通信里的常见坑——子组件没法直接修改父组件的变量，所以你在<app-rules>里直接设置selectedId = undefined根本没影响到父组件里控制*ngIf的那个变量。下面是具体的解决步骤：

步骤1：给子组件app-rules添加输出事件 #

在rules.component.ts里，用@Output定义一个事件，用来通知父组件“我要关闭了”：

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

@Component({
  selector: 'app-rules',
  templateUrl: './rules.component.html',
  styleUrls: ['./rules.component.css']
})
export class RulesComponent {
  // 定义一个输出事件，命名为closeRules
  @Output() closeRules = new EventEmitter<void>();

  // 关闭按钮的点击处理方法
  handleClose() {
    // 向父组件发送关闭信号
    this.closeRules.emit();
  }
}

步骤2：子组件模板绑定点击事件 #

修改rules.component.html里的关闭按钮，把点击事件绑定到刚才写的handleClose方法：

<!-- 示例关闭按钮，根据你实际的按钮样式调整 -->
<button class="close-btn" (click)="handleClose()">×</button>

步骤3：父组件监听事件并更新状态 #

回到父组件的模板，给<app-rules>绑定closeRules事件，触发时把selectedId设为undefined：

<app-header></app-header>
<app-map></app-map>
<app-rules *ngIf="selectedId" (closeRules)="selectedId = undefined"></app-rules>

为什么之前的方法不生效？ #

Angular的每个组件都有自己独立的作用域，你在子组件里操作的selectedId和父组件里的不是同一个变量——相当于你在自己房间里改了个副本，父组件完全没感知到。通过@Output事件传递信号，让父组件自己更新状态，才能触发*ngIf的变化，从而移除子组件。

额外排查点（如果还是没生效） #

• 确认父组件里的selectedId是类的成员变量，不是局部变量
• 检查子组件是否正确导入了Output和EventEmitter
• 确认关闭按钮的(click)绑定没有拼写错误

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