我如何 select 在 Angular 指令中具有特定 class 的元素的子元素？

Question

如何 select 一个在 Angular 指令中具有特定 class 的元素的子元素？

我正在尝试使用以下指令拦截图像下载错误：

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 并在复杂指令 selectors 上找到了一些东西，就像我在这里使用的那样。而且我既没有发现可以，也没有发现不可能。

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

我对页面上的所有图片都不感兴趣。我只对包含在特定 div 中的图像感兴趣。所以，我不能只使用 img select 或者。此外，我无法将特定 class 应用于特定元素内的所有图像。所以，我不能使用像 img.intercept-error-here select 或.

这样的东西

Answer 1

它看起来不像选择器处理 CSS 儿童选择器。我尝试在 stackblitz 中复制它，如果选择器是

selector: '.imgs-container img',

未调用指令构造函数。这意味着该指令从未被初始化，这就是您的错误未加载的原因。

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

selector: "img[src]",

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

Here 是 img[src] 选择器

的 link

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

Answer 2

回答您的问题：select 儿童无法使用 selector 属性。在 angular 文档中，为指令 select 或：

编写了以下内容

Angular only allows directives to apply on CSS selectors that do not cross element boundaries.

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

我如何 select 在 Angular 指令中具有特定 class 的元素的子元素？

How can I select children of an element that has a specific class in Angular directive?

angular

image

css-selectors

directive