gpt4 book ai didi

javascript - 将点击事件绑定(bind)到动态生成的内容(Angular 4)

转载 作者:行者123 更新时间:2023-12-03 00:53:22 24 4
gpt4 key购买 nike

我有以下函数,它基本上生成一个日期并将其插入到 View 中的 div 之前 - 我需要修改它,以便我能够使用 Angular 渲染器函数来使用单击事件,但在使用下面的代码时遇到困难:

generateTimestampDiv(date, $this) {
let parent = document.getElementsByClassName('ui-datepicker-header');
let minutes = (date.getMinutes()<10 ? '0' : '') + date.getMinutes();
let datetime = date.toDateString()+' '+date.getHours()+':'+minutes;

let content = '<div style="background-color: #fafafa; width:90%;">'+ datetime +'</div>';
$(content).insertBefore(parent[0]);

// this bit is incorrect
this.renderer.listen(content, 'click', (event) => {
this.userClicked(event, this);
})
}

我需要修改函数以根据函数插入内容,同时还要监听单击事件,以便我可以将事件传递给 userClicked() 函数

最佳答案

使用 Angular Renderer2 insertBefore 方法

export class AppComponent implements OnInit {
@ViewChild('clickablediv') el: ElementRef;

constructor(private _renderer: Renderer2) { }

ngOnInit() {
this._renderer.listen(this.el.nativeElement, 'click', (event) => {
this.generateTimestampDiv(new Date())
});
}

generateTimestampDiv(date) {
let minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
let datetime = date.toDateString() + ' ' + date.getHours() + ':' + minutes;

const div = document.createElement('div');
div.style.backgroundColor = "#fafafa";
div.style.width = "90%";
div.innerHTML = datetime;

this._renderer.insertBefore(this.el.nativeElement.parentNode, div, this.el.nativeElement)
}
}

demo

关于javascript - 将点击事件绑定(bind)到动态生成的内容(Angular 4),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52950880/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com