如何解决如何在Angular指令中选择具有特定类的元素的子代?
如何在Angular指令中选择具有特定类的元素的子代?
我正在尝试通过以下指令拦截图片下载错误:
import { Directive,ElementRef } from '@angular/core';
@Directive({
selector: '.imgs-container img',host: {
'(error)': 'onImgError($event)'
}
})
export class InterceptImgErrorDirective {
constructor(
private el: ElementRef
) {
const sotp = 0;
}
onImgError(arg: any) {
const stop = 0;
}
}
现在使用html,我有:
<div class="imgs-container">
<img>
</div>
我希望我的断点进入指令的构造函数。但是断点永远不会被击中。
我试图用google搜索并在复杂的指令选择器上找到一些东西,例如我在这里使用的那个。而且我既没有发现不可能,也没有发现不可能。
那么,有人可以建议我吗?是不可能还是我在这里错过了什么?
我对页面上的所有图像都不感兴趣。我只对特定div
中包含的图像感兴趣。因此,我不能仅使用img
选择器。另外,我不能将特定的类应用于特定元素内的所有图像。因此,我不能使用类似img.intercept-error-here
选择器的东西。
解决方法
它看起来不像选择器为孩子们处理CSS选择器。我尝试在stackblitz中重现它,如果选择器是
selector: '.imgs-container img',
指令构造函数未调用。表示该指令从未初始化,这就是为什么您的错误未加载的原因。
如果我将选择器修改为目标元素,而不是子元素,则它可以工作。即
selector: "img[src]",
然后调用构造函数,并触发onError。如果选择器为.imgs-container
,则构造函数也会被初始化。
Pandas documentation是img[src]
选择器的链接
我建议修改选择器以定位元素而不是元素子元素
,回答您的问题:无法使用选择器arrribute选择孩子。在角度文档中,为指令选择器编写了以下内容:
Angular仅允许将指令应用于不跨越元素边界的CSS选择器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。