如何在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页）中确认）。