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中的“ 属性指令”。

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

如果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-dragulaor但我想你可以这样dragula分配 a并配置它dragModel

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

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

当您想要启用它时，指定一个不禁用启动的模型

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

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