时间戳

首页 > 解决方案 > 如何在 Angular 指令中选择具有特定类的元素的子元素？

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

我期待我的断点进入指令的构造函数。但是断点永远不会被击中。

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

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

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

标签： angularimagecss-selectorsdirective

解决方案

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

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

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

推荐阅读