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>

- Peter

Answer 1

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

我没有使用ng2-dragula或dragula，但我猜您可以分配一个dragModel并以此方式进行配置。

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

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

当您想要启用它时，请分配一个不会禁用启动的模型。

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

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

- Günter Zöchbauer

---

感谢回复。当dragulaModel = {start: function () {}};时，允许拖放，当移动并放置项目时，会抛出以下错误：TypeError：sourceModel.splice不是一个函数。顺便说一下，有两种方法可以解决这个问题：一种是完全防止拖放事件发生-目前我们不知道如何解决此问题。第二种方法是允许拖放事件的发生，但不保存结果，即if(enableDragNDrop) this.dragulaService.dropModel.subscribe(this.myCustomOnDropCallback.bind(this))。 - Peter

我目前没有计划使用Dragula，因此我不打算深入研究这个主题。我只是从Angular的角度尝试提供帮助。如果我直接询问Dragula而不提到Angular，可能会获得更好的结果。 - Günter Zöchbauer

好的，我找到了一种方法来有条件地完全禁用Angular 2中的drag＆drop。这是使用moves回调来实现的，只有当移动的dom元素具有特定的css时才允许移动 - 这个css类仅在enableDragNDrop == true时由Angular 2分配给可拖动元素。 - Peter

听起来很有前途。 - Günter Zöchbauer