Angular 2 : how to conditionally apply attribute directive?

Question

我通过 ng2-dragula 使用拖放操作.拖放功能以这种方式应用:

<div class='container' [dragula]='"first-bag"'>
    <div>item 1</div>
    <div>item 2</div>
</div>

如果我正确理解 angular 2，[dragula]='"first-bag"' 附加到我的 div 的方式称为 Attribute Directive在 Angular 2 中。

现在我的组件中有一个名为 enableDragNDrop:boolean 的变量。仅当 enableDragNDrop == true 时，如何使用此变量将 [dragula]='"first-bag"' 附加到我的 div？

如果 enableDragNDrop == false，我想要这个:

<div class='container'><!-- no dragula attribute directive, no dragndrop -->
    <div>item 1</div>
    <div>item 2</div>
</div>

Answer 1

无法通过添加/删除选择器来动态添加/删除指令。选择器 dragula 必须是静态 HTML 才能应用指令。如果它提供了这样的配置选项，您只能使用 dragula 的功能来启用/禁用它。

我没有使用过 ng2-dragula 或 dragula 但我想你可以分配一个 dragModel 并以这种方式配置它

<div class='container' dragula [dragulaModel]="dragulaModel">

dragulaModel = {start: function () {}};

当你想启用它时，分配一个不禁用启动的模型

enableDrag() {
  this.dragulaModel = {};
}

未经测试，只是浏览了一些源代码。