如何在innerHTML Angular 2中绑定单击事件/功能? [英] How to bind a click event/function in innerHTML Angular 2?

问题描述

我有一个innerHTML，如下:

I have an innerHTML as below:

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事件.

But the problem is, I cant access the click event from my span.

我有一个如下的函数调用:

I have a function call as below:

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范围中的范围.我该如何访问?

But am getting a span from my templateUrl. Cant access the span in my innerHTML span. How can I access it?

推荐答案

您确实应该使用angular的模板引擎.

You really should use angular's templating engine.

除了尝试通过脚本添加html之外，您还可以简单地使用*ngFor在html中使用以下代码来实现所需的结果.

Instead of trying to add the html via script, you could achieve your desired outcome simply with the following in straight html with the use of *ngFor.

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 指令实例化一个模板，每次迭代一次.每个实例化模板的上下文都从外部上下文继承而来，其中给定循环变量设置为可迭代对象中的当前项.

The NgFor directive instantiates a template once per item from an iterable. The context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable.

这篇关于如何在innerHTML Angular 2中绑定单击事件/功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！