angular - Angular 指令在 `contenteditable` 元素中不起作用

Question

contenteditableAngular 指令在元素内部不起作用。我该如何解决？

这是我的示例用例。

我有一个指令：

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '.customDownload',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    
    alert("code reached");
  }
  
}

当我在customDownload类之外添加一个元素时，contenteditable我收到了预期的警报消息：

import { Component, ViewChild, Output } from '@angular/core';
import { DialogComponent } from './dialog.component';
import { EditorComponent } from '@progress/kendo-angular-editor';

@Component({
    selector: 'my-app',
    template: `
    <kendo-editor #editor style="height: 400px;" [iframe]="false">
        <kendo-toolbar>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-button text="Upload Image" (click)="open()"></kendo-toolbar-button>
        </kendo-toolbar>
    </kendo-editor>

    <img class="customDownload" />

    <my-dialog #upload [editor]="editor"></my-dialog>   
  `
})
export class AppComponent {
    @ViewChild('upload') public dialog: DialogComponent;
    @Output() @ViewChild('editor') public editor: EditorComponent;

    public open() {
        this.dialog.open();
    }
}

现在我将代码更改为以下内容：

import { Component, ViewChild, Output } from '@angular/core';
import { DialogComponent } from './dialog.component';
import { EditorComponent } from '@progress/kendo-angular-editor';

@Component({
    selector: 'my-app',
    template: `
    <kendo-editor #editor style="height: 400px;" [iframe]="false">
        <kendo-toolbar>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-button text="Upload Image" (click)="open()"></kendo-toolbar-button>
        </kendo-toolbar>
    </kendo-editor>

    <my-dialog #upload [editor]="editor"></my-dialog>   
  `
})
export class AppComponent {
    @ViewChild('upload') public dialog: DialogComponent;
    @Output() @ViewChild('editor') public editor: EditorComponent;

    public open() {
        this.dialog.open();
    }
}

前往Upload Image：

上传图片：

检查图像是否使用必要的类上传：

现在我看到该元素已添加到 DOM，但 Angular 只是忽略了它，并且没有运行指令构造函数。

这是来自 stackblitz 的工作示例。

我需要为动态添加的元素（即带有 class 的图像）运行指令（即要显示的警报消息customDownload）。我怎么能做到这一点？