如何在Angular中編寫自定義特殊屬性綁定？

Question

Angular具有special property binding 。 例如，我們可以在屬性中使用[class.className]或[style.line-height.em]語法

<!-- isActive() returns true or false in order to set active class -->
<h1 class="leading" [class.active]="isActive()">Title</h1>

<!-- getColor() returns a valid color -->
<h1 [style.color]="getColor()">Title</h1>
<h1 [style.line-height.em]="'2'">Title</h1>

如何編寫自定義特殊屬性綁定？ 例如[my.custom1]或[my.custom2.custom3]或......

我的問題是關於這些dots如何角度處理它們？

可能嗎？ 有樣品嗎？

Answer 1

唯一的方法是重命名輸入。 考慮不是作為對象表示法，而是作為一個整體，詳盡的財產監聽。

@Input('my.custom2') myCustom2: any;
@Input('my.custom3') myCustom3: any;

例如，您可以查看使用此表示法的@angular/flex-layout （轉到第65行）

編輯 Angular不是“動態的”，他們依靠Javascript來獲取這些屬性。 這是在框架中構建的，它不會暴露給您使用。 看這個 ：

 const el = document.querySelector('div'); console.log(el.attributes[0].name); 

 <div class.myClass="true"></div> 

如您所見，您可以通過這種方式獲取屬性。 Angular沒有提供一種“動態”選擇屬性的方法。 它只提供一個或兩個自定義屬性讀取，如class或attr ，但這就是全部。

例如，在github的Angular repo中快速搜索將在此文件 （第161行）， 此文件 （第276行）， 此文件 （第67行）以及可能更多（我只檢查搜索結果的前3頁）中確認）。