如何让容器/div的某些部分选择性地忽略angular中的click事件？

<div (click)="handleClick($event)">
  <div class="ignore-click">这部分将忽略click事件</div>
  <div>这部分将触发click事件</div>
</div>

handleClick(event: MouseEvent) {
  if (!(event.target as HTMLElement).classList.contains('ignore-click')) {
    // 处理click事件的逻辑
  }
}

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

@Component({
  selector: 'app-example',
  template: `
    <div (click)="handleClick($event)">
      <div class="ignore-click">这部分将忽略click事件</div>
      <div>这部分将触发click事件</div>
    </div>
  `,
})
export class ExampleComponent {
  @HostListener('click', ['$event'])
  handleClick(event: MouseEvent) {
    if (!(event.target as HTMLElement).classList.contains('ignore-click')) {
      // 处理click事件的逻辑
    }
  }
}