如何解决绑定属性值上的 Angular 组件选择器
我正在尝试在属性值上编写一个组件选择器,如下所示:
selector: '[data-type=Type1]'
这在以下 HTML 中效果很好:
<div *ngFor="let item of items">
<div data-type="Type1"></div>
</div>
但不是这样工作的(这当然是我想要的):
<div *ngFor="let item of items">
<div [data-type]="item.type"></div>
</div>
我猜这是由于 Angular 解决问题的顺序。我想要的可能吗?
解决方法
无法根据更改检测添加或删除指令。指令要么始终存在,要么不存在。
您的指令应将 data-type
值作为输入,然后确定是否执行其工作。
例如
@Directive({
selector: '[data-type]'
})
export class DataTypeDirective {
@Input('data-type') dataType: string;
doSomeStuff() {
if (this.dataType !== 'Type1') {
return;
}
// perform the directive's function
}
}
或者如果它是一个组件,请在模板中使用 *ngIf
:
<div *ngIf="dataType === 'Type1'">
<!-- the component's body -->
</div>
,
我认为语法可能有点问题。尝试使用“[selector_name]”。添加链接,this one 以使用选择器。
,属性绑定语法类似于属性绑定,但不是括号之间的元素属性,而是在属性名称前加上前缀 attr,后跟一个点。然后,您使用解析为字符串的表达式设置属性值。 https://angular.io/guide/attribute-binding
在你的情况下,应该是这样
<div *ngFor="let item of items">
<div [attr.data-type]="item.type"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。