Angular指令覆盖HTML元素数据绑定属性：解决图片Fallback循环问题

问题根源 #

你遇到的循环问题，本质是Angular的变更检测机制导致的：模板中[src]绑定的表达式会被Angular定期检查，当你通过指令直接修改DOM元素的src为备用图后，下次变更检测时，Angular发现元素src和绑定表达式的结果不一致，会强制把src改回原始绑定值，这又会触发图片加载错误，进而陷入循环。

解决方案 #

方案一：让指令接管src绑定（推荐） #

修改模板和指令，由指令统一管理图片地址的加载与 fallback，避免Angular变更检测的冲突。

模板代码

<img [imageSrc]="sanitizer.bypassSecurityTrustResourceUrl(building + url + with + variables)"
     fallbackImage="path/to/fallback.svg">

指令代码

import { Directive, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { SafeResourceUrl } from '@angular/platform-browser';

@Directive({
    selector: 'img[fallbackImage]'
})
export class ImgFallbackDirective implements OnChanges {
    @Input('imageSrc') imageSrc?: SafeResourceUrl | string;
    @Input('fallbackImage') fallbackImage: string = '';

    @HostBinding('src') currentSrc?: string;

    ngOnChanges(changes: SimpleChanges): void {
        // 原始图片地址变化时，重新加载
        if (changes['imageSrc']) {
            this.currentSrc = this.imageSrc as string;
        }
    }

    @HostListener('error') displayFallbackImage() {
        // 避免备用图加载失败再次触发循环
        if (this.currentSrc === this.fallbackImage) return;
        this.currentSrc = this.fallbackImage;
    }
}

方案二：阻止变更检测覆盖（兼容原有模板） #

如果不想修改现有模板的[src]绑定逻辑，可以通过标记位和变更检测钩子，强制保持备用图的src值。

指令代码

import { Directive, ElementRef, HostListener, Input, DoCheck } from '@angular/core';

@Directive({
    selector: 'img[fallbackImage]'
})
export class ImgFallbackDirective implements DoCheck {
    @Input('fallbackImage') fallbackImage: string = '';
    private hasFallbackApplied = false;

    constructor(private element: ElementRef) {}

    ngDoCheck(): void {
        // 已应用备用图时，强制保持src为备用图地址
        if (this.hasFallbackApplied && this.element.nativeElement.src !== this.fallbackImage) {
            this.element.nativeElement.src = this.fallbackImage;
        }
    }

    @HostListener('error') displayFallbackImage() {
        if (this.hasFallbackApplied || this.element.nativeElement.src === this.fallbackImage) return;
        
        this.element.nativeElement.src = this.fallbackImage || '';
        this.hasFallbackApplied = true;
    }
}

内容的提问来源于stack exchange，提问作者Nils