[英]Click event on an inserted button to a contentEditable DIV doesn't work
I have a contentEditable DIV.我有一个 contentEditable DIV。 I use the following Directive to manage it:
我使用以下指令来管理它:
<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;
}
}
}
If # sign is entered then a button element is added inside the DIV如果输入#符号,则在 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> `;
}
So far so good.到目前为止,一切都很好。 The button is shown inside the DOM.
该按钮显示在 DOM 内部。
How can I add (click) event to the button?如何向按钮添加(单击)事件?
I've tried couple of ways:我尝试了几种方法:
return `<button (click)="() => myFunc()" style="color: #0d95db; font-weight: 600; cursor: pointer;">#${tag.name}</button> `;
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;
}
}
In both cases (click) callback functions are not invoked.在这两种情况下(点击)回调函数都不会被调用。
For the click handler on the button the syntax should be (click)="myFunc()"
where myFunc
is a function defined in your component.对于按钮上的单击处理程序,语法应为
(click)="myFunc()"
其中myFunc
是在您的组件中定义的 function。
https://angular.io/guide/event-binding https://angular.io/guide/event-binding
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.