如何在 Angular 指令中选择具有特定类的元素的子元素？答案

【问题标题】：How can I select children of an element that has a specific class in Angular directive?如何在 Angular 指令中选择具有特定类的元素的子元素？
【发布时间】：2020-10-26 17:33:51
【问题描述】：

如何在 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>

我希望我的断点进入指令的构造函数。但是断点永远不会被命中。

我试图用谷歌搜索并在复杂的指令选择器上找到一些东西，比如我在这里使用的那个。而我既没有发现可能，也没有发现不可能。

那么，有人可以就这件事给我建议吗？这是不可能的还是我在这里遗漏了什么？

我对页面上的所有图片都不感兴趣。我只对特定div 中包含的图像感兴趣。所以，我不能只使用img 选择器。此外，我不能将特定类应用于特定元素内的所有图像。所以，我不能使用 img.intercept-error-here 选择器之类的东西。

【问题讨论】：

标签： angular image css-selectors directive

【解决方案1】：

回答您的问题：无法使用选择器属性选择子级。在角度文档中为指令选择器编写了以下内容：

Angular 只允许指令应用于不跨越元素边界的 CSS 选择器。

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

【讨论】：

【解决方案2】：

它看起来不像选择器为子级处理 CSS 选择器。我尝试在 stackblitz 中重现这个，如果选择器是

selector: '.imgs-container img',

指令构造函数没有被调用。意味着指令永远不会被初始化，这就是你的错误没有加载的原因。

如果我修改选择器以定位一个元素，而不是它的子元素，它会起作用。即

selector: "img[src]",

然后调用构造函数并且 onError 也会触发。如果选择器是.imgs-container，构造函数也会被初始化。

Here 是img[src] 选择器的链接

我建议修改您的选择器以定位元素而不是元素的子元素

【讨论】：

没有选择器，可以针对元素的子元素。每个选择器都以一组元素为目标。抱歉，您的回答一点用处都没有。