Javascript 如何在innerHTML 2中绑定单击事件/函数?
我有一个innerHTML,如下所示:Javascript 如何在innerHTML 2中绑定单击事件/函数?,javascript,angular,innerhtml,Javascript,Angular,Innerhtml,我有一个innerHTML,如下所示: getWidgetItem(widgetId: any) { this._widgetId = widgetId; this.widgets = [{'name': 'Welcome'}, {'name': 'Welcome1'}, {'name': 'Welcome2'}]; this.newArray = this.widgets.map((obj) => { let htmlText = `
getWidgetItem(widgetId: any) {
this._widgetId = widgetId;
this.widgets = [{'name': 'Welcome'}, {'name': 'Welcome1'}, {'name': 'Welcome2'}];
this.newArray = this.widgets.map((obj) => {
let htmlText = `
<div>
<section class="page subpage dashboard dashboard-page" style="overflow-y:hidden;">
<div class="newDashbaord">
<header>
<div class="actions">
<button class="control-btn borderless close-btn">
<span #target class="icon-close action-icon" (click)="RemoveWidget(${obj})"></span>
</button>
</div>
<h1 class="table-heading">${obj.name}</h1>
</header>
<main>
</main>
</div>
</section>
</div>`;
return htmlText;
});
}
private RemoveWidget(widget:any) {
if (typeof widget != 'undefined' && typeof this.widgets != 'undefined'){
console.log('CALLEDe', widget);
let index: number = this.widgets.indexOf(widget);
if (index !== -1) {
this.widgets.splice(index, 1);
}
}
}
我试过:
ngAfterContentInit(): void {
// console.log('target called', this.elementRef.nativeElement.querySelector('span'));
this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => {
console.log('event called??', event);
// this.RemoveWidget(event);
});
}
但是我从我的模板URL得到了一个跨度。无法访问我的innerHTML span中的span。如何访问它?您真的应该使用angular的模板引擎 您不必试图通过脚本添加html,只需使用
*ngFor
,在纯html中使用以下内容即可实现所需的结果
some-file.html
<div *ngFor="let widget of widgets">
<section class="page subpage dashboard dashboard-page" style="overflow-y:hidden;">
<div class="newDashbaord">
<header>
<div class="actions">
<button class="control-btn borderless close-btn">
<span #target class="icon-close action-icon" (click)="RemoveWidget(widget)"></span>
</button>
</div>
<h1 class="table-heading">widget.name</h1>
</header>
<main>
</main>
</div>
</section>
</div>
some-file.html
widget.name
该指令对iterable中的每个项实例化一次模板。每个实例化模板的上下文从外部上下文继承,给定的循环变量设置为iterable中的当前项
为什么要在
span
上单击。将span
包装在一个按钮中,然后单击我尝试使用的按钮,但不知何故,我无法通过浏览器中的inspect元素在html中找到我的按钮。但这不是问题。如果我理解正确,您希望在从屏幕单击按钮时调用RemoveWidget
功能。你到底在哪里面对这个问题?不要这样编程。Angular不是jQuery。