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

问题描述

我通过 ng2-dragula 使用拖放操作.拖放功能是通过以下方式应用的:

I use drag&drop via ng2-dragula.The drag&drop functionality is applied this way:

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

如果我正确理解了角度2，则将[dragula]='"first-bag"'连接到div的方式称为属性指令.

If I understand angular 2 properly, the way how [dragula]='"first-bag"' is attached to my div is called Attribute Directive in Angular 2.

现在，我的组件中有一个名为enableDragNDrop:boolean的变量.仅当enableDragNDrop == true时，如何使用此变量将[dragula]='"first-bag"'附加到我的div上?

Now I have a variable in my component called enableDragNDrop:boolean. How can I use this variable to attach [dragula]='"first-bag"' to my div only when enableDragNDrop == true ?

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

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

推荐答案

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

There is no way to dynamically add/remove directives by adding/removing a selector. The selector dragula has to be static HTML for the directive to get applied. You can only use features of dragula to enable/disable it if it provides such a configuration option.

我没有使用ng2-dragula或dragula，但是我想您可以分配dragModel并以此方式配置

I haven't used ng2-dragula or dragula but I guess you can assign a dragModel and configure it this way

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

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

，并且要启用它时，请分配一个不会禁用启动的模型

and when you want to enable it, assign a model that doesn't disable start

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

未经测试，只是略过了源代码.

Not tested, just skimmed a bit through the source.

这篇关于Angular 2:如何有条件地应用属性指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！