[英]Bind click event to dynamically generated content (Angular 4)
我具有以下函數,該函數基本上會生成日期並將其插入到視圖中的div之前-我需要對其進行修改,以便能夠使用角度渲染器功能使用click事件,但是在下面的代碼上遇到了困難:
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);
})
}
我需要修改該函數以根據該函數插入內容,但還要監聽click事件事件,以便可以將該事件傳遞給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)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.