Question

我有一个可重复的组件，其中每个组件都需要有自己独特的阻断剂。我说：“好，那是有道理的”

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

在尝试创建此文件时，我考虑在每个组件的基础上创建一个GUID，称为：widgetGuid。在查看block属性时，我在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>

因此，该Component的每个实例将获得一个唯一定义的guid，并将具有其自己唯一的块引用。

在运行时定义BlockUi Angular注释？

1 个答案: