插入到 contentEditable DIV 的按鈕上的單擊事件不起作用

Question

我有一個 contentEditable DIV。 我使用以下指令來管理它：

<div
   class="msg-input-area"
   [class.focused]="isMsgAreaFocused"
   contenteditable
   [contenteditableModel]="msgText"
   (contenteditableModelChange)="onMsgTextChange($event)"
   (contenteditableModelSubmit)="onMsgSend()"
   (removeHashSign)="removeHashSign()"
   placeholder="Compose your comment here"
   tabindex="0"
   (focus)="isMsgAreaFocused = true"
   (blur)="isMsgAreaFocused = false"
   #msgInputArea
></div>






@Directive({
    selector: '[contenteditableModel]',
    host: {
        '(blur)': 'onEdit()',
        '(keydown)': 'onKeyDown($event)',
        '(keyup)': 'onEdit()'
    }
})
export class ContentEditableDirective implements OnChanges {
    @Input('contenteditableModel') model: string;
    @Output('contenteditableModelChange') valueChanges = new EventEmitter<string>();
    @Output('contenteditableModelSubmit') submit = new EventEmitter<void>();
    @Output('removeHashSign') removeHashSign = new EventEmitter<void>();

    constructor(private elementRef: ElementRef<HTMLElement>) {}

    ngOnChanges(changes: SimpleChanges) {
        if (changes.model) {
            this.refreshView();
        }
    }

    onEdit(): void {
        const value = this.elementRef.nativeElement.innerText;
        this.valueChanges.emit(value);
    }

    onKeyDown(event: KeyboardEvent): void {
        if (!(event.ctrlKey || event.metaKey) && event.code === 'Enter') {
            // submit
            this.valueChanges.emit(this.elementRef.nativeElement.innerHTML);
            this.submit.emit();
            event.preventDefault();
            return;
        } else if (event.code === 'Backspace' && this.model[this.model.length - 1] === '#') {
            // remove #
            this.removeHashSign.emit();
            return;
        }
        this.onEdit();
    }

    private refreshView(): void {
        if (!this.model) {
            this.elementRef.nativeElement.textContent = this.model;
        } else if (this.model?.includes('<button')) {
            this.elementRef.nativeElement.innerHTML = this.model;
        }
    }
}

如果輸入#符號，則在 DIV 內添加一個按鈕元素

... => {
       let msgWithTag = this.msgText.slice(0, -1);
       msgWithTag += this.generateLinkTag(tag);
       this.msgText = msgWithTag;
}

...

private generateLinkTag(tag: IConversationTag): string {
        return `<button style="color: #0d95db; font-weight: 600; cursor: pointer;">#${tag.name}</button>&nbsp;`;
}

到目前為止，一切都很好。 該按鈕顯示在 DOM 內部。

如何向按鈕添加（單擊）事件？

我嘗試了幾種方法：

return `<button (click)="() => myFunc()" style="color: #0d95db; font-weight: 600; cursor: pointer;">#${tag.name}</button>&nbsp;`;


and

ngAfterViewInit() {
        const parser = new DOMParser();
        const doc = parser.parseFromString(myString, 'text/html');
        doc.body.childNodes.forEach((node: ChildNode) => {
            if (node.nodeName.toLowerCase() === 'button') {
                console.log(node)
                node.addEventListener('click', () => {
                    console.log('click')
                });
            }
        });
        if (this.msgContent) {
            this.msgContent.nativeElement.innerHTML = doc.body.innerHTML;
        }
}

在這兩種情況下（點擊）回調函數都不會被調用。

Answer 1

對於按鈕上的單擊處理程序，語法應為(click)="myFunc()"其中myFunc是在您的組件中定義的 function。

https://angular.io/guide/event-binding