如何在innerHTML Angular 2中绑定点击事件/功能？答案

【问题标题】：How to bind a click event/function in innerHTML Angular 2?如何在innerHTML Angular 2中绑定点击事件/功能？
【发布时间】：2017-06-07 08:45:14
【问题描述】：

我有一个如下的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;
      });
  }

但问题是，我无法从我的跨度访问点击事件。

我有一个函数调用如下：

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 跨度中的跨度。如何访问它？

【问题讨论】：

你为什么在span 上有click。将span 包裹在一个按钮中，然后单击该按钮
我尝试使用按钮，但不知何故我无法通过浏览器中的检查元素在我的 html 中找到我的按钮。
但这不是问题
如果我理解正确，您想在屏幕上单击按钮时调用 RemoveWidget 函数。你到底在哪里遇到这个问题
不要这样编程。 Angular 不是 jQuery。

标签： javascript angular innerhtml

【解决方案1】：

你真的应该使用 Angular 的模板引擎。

您可以通过使用*ngFor 直接使用以下html 来实现您想要的结果，而不是尝试通过脚本添加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 指令从可迭代对象中为每个项目实例化一次模板。每个实例化模板的上下文都继承自外部上下文，并将给定的循环变量设置为可迭代对象中的当前项。

【讨论】：