使用「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」主機屬性時不應用指令

回答

相關問題