Angular 8, 9: Как заблокировать отдельный многократно используемый компонент (встроенный в ng-block-ui), который использовался несколько раз на странице | ie. создать несколько экземпляров?

Question

Я использовал компонент (с интегрированным ng-block-ui) в компоненте страницы. Он запускает оба события block-ui, если я щелкаю по любому из них.

Я хочу заблокировать пользовательский интерфейс этой указанной c карты, на которую я нажал.

Answer 1

Я нашел ответ !! к этой проблеме.

Путем предоставления случайно сгенерированного идентификатора при каждом вызове компонента и нацеливания на этот идентификатор при вызове экземпляра block-ui, он работал

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

Я использовал для этого сервис Block-ui:

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

Это помогло мне настроить таргетинг на указанный c идентификатор, по которому я щелкнул и хочу чтобы заблокировать этот элемент в HTML

СМОТРЕТЬ ИЗОБРАЖЕНИЕ ДЛЯ БОЛЬШЕ ССЫЛКИ