Angular指令在contentcontentable元素内不起作用

问题描述

Angular指令在contenteditable元素中不起作用。我该如何解决？

这是我的示例用例。

我有一条指令：

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,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只是忽略了它，并且没有运行指令构造函数。

Here是stackblitz中的有效示例。

我需要为动态添加的元素（即具有类customDownload的图像）运行指令（即要显示的警报消息）。我该如何实现？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）