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

Posted 2023-02-22

【中文标题】Angular 2：如何有条件地应用属性指令？

【英文标题】：Angular 2: how to conditionally apply attribute directive?

【发布时间】：2016-08-29 12:21:58

【问题描述】：

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

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

如果我正确理解了 Angular 2，那么在 Angular 2 中，[dragula]='"first-bag"' 附加到我的 div 的方式称为 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>

【参考方案1】：

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

我没有使用过ng2-dragula 或dragula，但我想你可以分配一个dragModel 并这样配置

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

dragulaModel = start: function () ;

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

enableDrag() 
  this.dragulaModel = ;

未经测试，只是略读了一下源代码。

【讨论】：

感谢您的回复。当dragulaModel = start: function () ; 时，允许拖放，当移动和放下项目时，会抛出以下错误：TypeError: sourceModel.splice is not a function。顺便说一句，有两种方法可以解决这个问题：一种是完全防止拖放发生 - 到目前为止我们不知道如何做到这一点。第二种方法是可以拖放，但不存储结果，即if(enableDragNDrop) this.dragulaService.dropModel.subscribe(this.myCustomOnDropCallback.bind(this))

我不打算深入研究这个话题，因为我目前不打算自己使用 Dragula。我只是试图从 Angular 的角度提供帮助。通过专门询问 Dragula 而不提及 Angular，我可能会得到更好的结果。

好的，我找到了一种方法，如何有条件地在 Dragula 中完全禁用 Angular 2 中的拖放，即使用 moves callback 仅在移动的 dom 元素具有特定 css 时才允许移动 - 这个 css仅当 enableDragNDrop == true 时，类才按角度 2 分配给可拖动元素。

这听起来很有希望。