определить BlockUi угловые аннотации во время выполнения?

Question

У меня есть повторяемый компонент, в котором каждому компоненту нужен свой уникальный блокировщик.Я сказал: «Хорошо, это имеет смысл»

У меня реализован blockUI, который активирует все компоненты с определенной строкой.В попытке справиться с модульностью, я пытался создать аннотацию, которая была динамической на ходу, используя guid.Проблема заключается в том, что шаблон и аннотация должны ссылаться на одно и то же.

В попытке создать это я рассчитываю создать GUID для каждого компонента под названием: widgetGuid.Я видел это в init, когда смотрел на свойство блока:

@BlockUI(`widget-content`) block: NgBlockUI;

, что было свойство name, которое я мог установить.Итак, в init я сделал:

this.block.name = `${this.block.name}-${this.widgetGuid}`;

, а затем в разметке я установил для статической строки значение:

// I also attempted some hardcoding as well: 
//    *blockUI="'widget-content'+widgetGuid" and that also failed.
*blockUI="block.name"

, но кажется, что как только я начал касатьсяимя блока, счетчики больше не функционируют.

Это должно было быть решено ранее, но я не уверен, что я, возможно, делал неправильно.

Answer 1

NgBlockUi имеет средство для этого, после тщательного изучения кодовой базы.

Во-первых, нам не понадобится декоратор, НО понадобится переменная для присваивания.

import { NgBlockUI } from 'node_modules/ng-block-ui';
import { BlockUIInstanceService } from 'ng-block-ui/lib/services/block-ui-instance.service';
import { Guid } from "src/utilities/guid.ts";  //A TS Guid Generator.

export class TestComponent implements OnInit {
    block: NgBlockUI;

    constructor( private _blockService: BlockUIInstanceService) {}

    ngOnInit() {
        let blockName = `widget-content-${Guid.newGuid()}`;
        this.block = this.blockService.decorate(blockName);
    }
}

Разметка:

<div *BlockUI="block.name">Hello World</div>

Следовательно, каждый экземпляр Компонента получит уникально определенную направляющую и будет иметь собственную уникальную ссылку на блок.