在运行时定义 BlockUi Angular 注释？

Question

我有一个可重复的组件，其中每个组件都需要自己独特的拦截器。我说"Ok, that makes sense"

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

为了尝试创建它，我打算在每个组件的基础上创建一个 GUID，称为：widgetGuid。我在 init 上看到了，在查看块属性:

时

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

我可以设置一个名称属性。所以在初始化中，我做了：

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>

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

在运行时定义 BlockUi Angular 注释？

define BlockUi Angular annotations at runtime?

angular

typescript

blocking