![](/img/trans.png)
[英]bind to click event to external content when using innerHTML angular
[英]How to bind a click event/function in innerHTML Angular 2?
我有一個innerHTML如下:
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;
});
}
但是問題是,我無法從我的范圍訪問click事件。
我有一個函數調用,如下所示:
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);
});
}
但是正在從我的templateUrl獲取范圍。 無法訪問我的innerHTML范圍中的范圍。 我該如何訪問?
您確實應該使用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>
NgFor指令從可迭代對象的每個項目實例化一次模板。 每個實例化模板的上下文都從外部上下文繼承,並且給定循環變量設置為可迭代對象中的當前項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.