Angular 递归嵌套组件中整个组件上的角度单击事件触发器

我有两个组件-列表视图组件详图组件。正在递归呈现详图构件，该构件具有一个单击处理程序

列表视图组件

HTML:

让我头疼的是，click事件不仅在我单击X时触发，而且在我单击
li
元素时也会触发。有治疗方法吗？我一直在想尽一切办法阻止它那样做。我希望单击事件仅由按钮处理

有什么想法吗？
问题在于
应用程序篮项目详细信息中的onclick处理程序：
（单击）=“removeBasketItem.emit（basketItems[childBasketItemId]）”

这样，所有递归创建的组件将在完整组件上有一个onclick。我不认为这是必要的，因为嵌套组件本身的按钮上将有一个新的onclick侦听器。尝试删除它。
您可能需要停止传播。单击事件正在冒泡：

(click)="removeBasketItem.emit(basketItem);$event.stopPropagation()"

好的，在详图组件上有
（单击）=“removeBasketItem.emit（basketItems[childBasketItemId]）”
。如果你不想让组件可以点击，为什么你要点击？对。完全忽略这一点，我看到了原因，但删除它并不能提供所需的行为，因为初始细节组件在
rootBasketItems$
上循环，子组件在另一个数组的子组件上循环，并且使用当前解决方案，只有根项目才能获得按钮单击处理程序。需要在这里找到另一个解决方案。您可以使用isDeleted事件来代替onclick侦听器，该事件将被发送到父级，然后父级将处理子数组中的删除。
@Component({
  selector: 'app-basket-item-list-view',
  templateUrl: './basket-item-list-view.component.html',
  styleUrls: ['./basket-item-list-view.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasketItemListViewComponent {
  rootBasketItems$: Observable<Array<BasketItem>>;
  allBasketItems$: Observable<Array<BasketItem>>;
  offeringsCache$: Observable<any>;

  constructor(private store: Store<fromRoot.State>) {
    this.rootBasketItems$ = store.select(fromRoot.getRootBasketItems);
    this.allBasketItems$ = store.select(fromRoot.getBasketItemsMap);
    this.offeringsCache$ = store.select(fromRoot.getOfferingsCache);
  }

  removeBasketItem(basketItem) {
    this.store.dispatch(new basketActions.RemoveBasketItem(basketItem));
  }
}

<ul class="basket-item-list">
  <li class="basket-item-action justify-content-between" [ngClass]="basketItem?.action.toLowerCase()">
    <span>{{ offeringsCache[basketItemId]?.description }}</span>
    <button class="close" (click)="removeBasketItem.emit(basketItem)">
      <span>&times;</span>
    </button>
  </li>

  <app-basket-item-detail *ngFor="let childBasketItemId of basketItem.children"
                          [basketItemId]="childBasketItemId"
                          [basketItems]="basketItems"
                          [offeringsCache]="offeringsCache"
                          (click)="removeBasketItem.emit(basketItems[childBasketItemId])">
  </app-basket-item-detail>
</ul>

@Component({
  selector: 'app-basket-item-detail',
  templateUrl: './basket-item-detail.component.html',
  styleUrls: ['./basket-item-detail.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasketItemDetailComponent implements OnInit {
  @Input() basketItemId: string;
  @Input() basketItems: Array<BasketItem> = [];
  @Input() offeringsCache: [string, BasketItem] = [undefined, undefined];

  @Output() removeBasketItem = new EventEmitter<BasketItem>();

  basketItem: BasketItem;
  offering: ProductOffering;

  ngOnInit(): void {
    this.basketItem = this.basketItems[this.basketItemId];
    this.offering = this.offeringsCache[this.basketItemId];
  }

}

(click)="removeBasketItem.emit(basketItem);$event.stopPropagation()"