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存储库中进行快速搜索将在this file（第161行），this file（第276行），this file（第67行）上确认这一点，并且可能还有很多更多（我只检查了搜索结果的前3页）。

如何在Angular中编写自定义特殊属性绑定？

1 个答案: