如何在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选择器。

https://angular.io/api/core/Directive#selector

angular css-selectors directive image image