Angular 2:如何有条件地应用属性指令

Question

我使用拖动&通过ng2 dragula滴下。拖动&投递功能是这样应用的：

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

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

现在，我的组件中有一个名为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提供这样的配置选项时，您才能使用dragula的功能来启用/禁用它。

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

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

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

当你想启用它时，指定一个不禁用的型号启动

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

没有经过测试，只是浏览了一下源代码。