在运行时定义BlockUi Angular注释？

Question

我有一个可重复的组件，其中每个组件都需要自己独特的阻止程序。我说“好的，这很有道理”

我实现了一个blockUI，它将使用定义的字符串在所有组件上激活。为了处理模块化，我试图创建一个动态运行的注释，利用guid。问题是模板和注释需要引用相同的东西。

为了创建这个，我想在每个组件的基础上创建一个GUID，称为：widgetGuid。我在init上查看了block属性：

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

有一个我可以设置的名称属性。所以在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>

因此，Component的每个实例都将获得一个唯一定义的guid，并且将拥有自己对块的唯一引用。