如何解决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 举报,一经查实,本站将立刻删除。