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

时间:2016-05-04 07:38:22

标签: angular drag-and-drop dragula

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

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

如果我正确理解了角度2,那么[dragula]='"first-bag"'附加到我的div的方式在Angular 2中称为Attribute Directive

现在我的组件中有一个名为enableDragNDrop:boolean的变量。如何仅在[dragula]='"first-bag"'

时使用此变量将enableDragNDrop == true附加到我的div

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

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

1 个答案:

答案 0 :(得分:2)

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

我还没有使用ng2-draguladragula,但我猜您可以分配一个dragModel并按此方式进行配置

<div class='container' dragula [dragulaModel]="dragulaModel">
dragulaModel = {start: function () {}};

如果要启用它,请指定一个不禁用启动的模型

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

未经测试,只是略微浏览了一下。