Question

我有2个组件 - 列表视图组件详细信息组件。细节组件以递归方式呈现，并具有单击处理程序。

列表视图组件

HTML：

<app-basket-item-detail *ngFor="let rootBasketItem of rootBasketItems$ | async"
                        [basketItemId]="rootBasketItem.basketItemId"
                        [basketItems]="allBasketItems$ | async"
                        [offeringsCache]="offeringsCache$ | async"
                        (removeBasketItem)="removeBasketItem($event)">
</app-basket-item-detail>

代码：

@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));
  }
}

详细信息组件（递归详细信息组件）

HTML：

<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事件不仅在我点击X时触发，而且在我点击li元素时也会触发。有治疗方法吗？我一直在尝试我能想到的一切，以阻止它表现得那样。我希望点击事件只能由按钮处理。

有什么想法吗？

Answer 1

您可能需要停止传播。点击事件正在冒泡：

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

Answer 2

问题在于app-basket-item-detail组件中的此onclick处理程序：(click)="removeBasketItem.emit(basketItems[childBasketItemId])"。

这样，所有递归创建的组件都将在完整组件上进行onclick。我不认为这是必要的，因为嵌套组件本身将在其自己的按钮上有一个新的onclick监听器。尝试删除它。

Angular click事件触发递归嵌套组件中的整个组件

2 个答案: