Angular 8 , 9 : 如何阻止在页面中多次使用的单个可重用组件（ng-block-ui 集成） | IE。创建多个实例？

Question

我在页面组件中使用了组件（集成了ng-block-ui）。如果我点击任何一个，它都会触发 block-ui 事件。

我想屏蔽我点击的那张特定卡片的 UI。

Answer 1

我找到答案了！！对于这个问题。

By providing randomly generated id each time the component gets called, and targeting that ID in call of block-ui instance it worked

  // Generate random string  assign to specific
  // core-card to only block that specific card

  public coreCardId: string = Math.random().toString(36).substring(2);


  // block ui on 'reload' method call
  reload(event) {
    this.blockUIService.start(this.coreCardId);

    // block-ui timeout
    setTimeout(() => {
      this.blockUIService.stop(this.coreCardId);
    }, 2500);
  }

I have used Block-ui service for this :

// ng-block-ui service
import { BlockUIService } from 'ng-block-ui';

It helped me to target that specific id that I clicked and want to block that element in HTML

查看图片以获取更多参考

Answer 2

您可以使用基于 CSS 的方法来阻止单个卡 UI。

在您的卡上使用 card-blocker class，它会在卡的顶部创建一个 UI 阻挡层，使其无法访问。

<div class="card card-blocker" (click)="onClick($event)">
   // card body
<div>

.card-blocker::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(192,192,192,0.1);
 }

此外，如果您想明确阻止任何点击事件，请使用组件端的方法：

onClick(e: Event): void {
    if ((e.target as HTMLElement).classList.contains('card-blocker')) {
        return;
    }

    // your logic for card click
}

Angular 8 , 9 : 如何阻止在页面中多次使用的单个可重用组件（ng-block-ui 集成） | IE。创建多个实例？

Angular 8 , 9 : How to block individual reusable component(ng-block-ui integrated) that used multiple time in a page | ie. create multiple instances?

angular

angular8

blockui