使用“attr”主机属性时不应用指令

基于this host attribute post，我创建了this Plunker。使用“attr”主机属性时不应用指令

阅读github问题后，我的理解是我们应该能够使用[attr.someDirective]有条件地将指令属性应用于元素。

它确实会像预期的那样添加/删除指令属性。但是，Plunker表明 - 使用attr时 - 即使指令arribute被添加到元素中，该指令也不会被应用。

我在这里错过了什么，或者这不是attr主机属性的工作方式？

2017-01-26 Kizmar

对于attr。 anyDirective要工作，anyDirective（没有任何价值）应包括在元素（在html模板中）。见下面（以粗体所示）：

选项-1（设置为空白将呈现不值指令）

< INPUT TYPE = “文本” 名称=“一个“phoneMask [attr.phoneMask] =”” [（ngModel）] = “input_one” >

<input type="text" name="one" phoneMask [(ngModel)]="input_one">

选项-2（设定为 “空” 将不渲染指令）

< INPUT TYPE = “文本” 名称= “一个” phoneMask [attr.phoneMask] = “空”[（ngModel）] = “input_one” >

<input type="text" name="one" [(ngModel)]="input_one">

选项-3（设定为 “SOME_VALUE” 不会呈现与该指令 “SOME_VALUE）

< INPUT TYPE =” 文本”名称= “一个” phoneMask [attr.phoneMask] = “SOME_VALUE”[（ngModel）] = “input_one” >

<input type="text" name="one" phoneMask="some_value" [(ngModel)]="input_one">

我曾经在由你提供的普拉克测试的上方和它的工作原理。

希望这可以帮助你。

来源

2017-01-26 17:28:08

经过进一步调查，这不是我需要/想要的方式。正如你在例子中展示的那样，我更新了这个plunk以包含'phoneMask'。第三个输入不应该应用指令（并且该属性不在元素上），但它仍然会触发指令的'onInputChange'函数。 – Kizmar

'onInputChange'的触发与元素中指令（属性）的存在/缺失无关。 'onInputChange'正在触发，因为你在自定义指令中设置了@HostListener（'ngModelChange'，['$ event']）''。如果你想避免'onInputChange'事件的影响，你必须通过'if（！this.phoneMask）return''从'onChangeInput'返回。 –

这就是我所害怕的。这意味着我正在使用的第三方指令需要修改。 – Kizmar

使用“attr”主机属性时不应用指令

回答

相关问题