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

3

Angular有一个特性叫做特殊属性绑定。例如,我们可以在属性中使用[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]等。

我的问题是关于这些,Angular如何处理它们?

是否有可能?有任何示例吗?


它一定要写成[my.custom1]吗,还是可以写成[custom1]?如果是这样,你可以在控制器中使用@Input() custom1 - John
据我所知,您可以使用指令和带参数的指令 https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding,但我从未听说过指令中的“点”语法。 - Eliseo
这不是属性绑定 - 这是属性绑定。参考:https://angular.io/guide/template-syntax#attribute-class-and-style-bindings在自定义场景中,为什么需要这个? - dee zg
@deezg,我正在阅读《Angular实战》。在这本书中,我们有一个章节叫做“3.6.3特殊属性绑定”。我的问题就是来自于这一章节。目前我还不知道答案,只是想提出这个问题。 - HamedFathi
该语法主要用于绑定DOM元素的样式、CSS类或其他属性,如参考示例所示[attr.aria-label]。除此之外,我不知道还有什么其他用途。 - dee zg
显示剩余2条评论
1个回答

0
唯一的方法是重命名您的输入。将其视为一个完整的、详尽的属性列表,而不是对象表示法。
@Input('my.custom2') myCustom2: any;
@Input('my.custom3') myCustom3: any;

例如,您可以查看{{link1:@angular/flex-layout}}的示例,该示例使用此符号(转到第65行)。 编辑 Angular不是“动态”的,它们依赖于Javascript来获取这些属性。这是在框架中构建的,不会向您公开使用。请参考:

const el = document.querySelector('div');
console.log(el.attributes[0].name);
<div class.myClass="true"></div>

正如您所见,您可以通过这种方式获取属性。Angular没有提供一种选择“动态”属性的方法。它只提供了一两个自定义属性读取,例如classattr,但仅此而已。

例如,在github的Angular存储库中进行快速搜索将在this file(第161行),this file(第276行),this file(第67行)和可能更多(我只检查了搜索结果的前3页)。


1
你的方法是静态的。根据我的样例 [class.className],Angular 接受动态的 className 作为第二部分。我认为他们应该有一个解决方案。 - HamedFathi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接