Angular中点击section内span如何实现整个section关闭？

我来帮你搞定这个问题，核心原因是你现在用的event.target会指向实际被点击的子元素（也就是那个Close按钮），所以只有按钮会被加上关闭的样式。这里有几种简单的解决方案，你可以根据需求选：

方案1：用event.currentTarget替代event.target #

currentTarget指的是绑定了点击事件的那个元素（也就是你的<section>），不管你点击的是section里的哪个子元素，它都会指向section本身。修改你的方法代码就行：

removeOfflineNotification(event: any) {
  console.log('event clicked', event);
  // 把event.target换成event.currentTarget
  this.render.addClass(event.currentTarget, 'offline-notifier-closed');
}

HTML不需要做任何改动，还是原来的绑定方式。

方案2：利用Angular的*ngIf控制显示（更推荐） #

既然你的section是用*ngIf="!isOnline"控制显示的，那直接修改isOnline变量来隐藏整个section才是更符合Angular思路的做法，不用直接操作DOM：

首先修改组件方法：

removeOfflineNotification() {
  // 把isOnline设为true，让*ngIf隐藏section
  this.isOnline = true;
  // 如果后面需要恢复离线状态，可以根据实际逻辑调整这个值
}

然后HTML里可以不用传$event了：

<section class="offline-notifier" *ngIf="!isOnline" (click)="removeOfflineNotification()">
  <h4>You are currently offline</h4>
  <p>The App will have limited functionality</p>
  <span class="btn btn-primary">Close</span>
</section>

如果只想让点击Close按钮时才关闭（而不是点击section任何地方都关闭），那把点击事件绑定到span上就行：

<section class="offline-notifier" *ngIf="!isOnline">
  <h4>You are currently offline</h4>
  <p>The App will have limited functionality</p>
  <span class="btn btn-primary" (click)="removeOfflineNotification()">Close</span>
</section>

为什么原来的代码不行？ #

简单来说：

• event.target是触发事件的具体DOM元素，点击Close按钮时它就是那个<span>，所以你给span加了offline-notifier-closed样式，只有按钮被隐藏；
• 而点击section空白处时，event.target是section本身，这时候样式才会加到section上，整个区域才消失。

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