创建 DOM 后向元素添加事件

Question

我试图弄清楚在元素添加到 DOM 后如何向元素添加事件。

现在，我有这样的事情：

import {Component} from 'angular2/core';

@Component({
    selector   : 'sub-child',
    template   : '<form [innerHTML]="html"></form>'
})

export class SubChildClass
{
    private html:string;
    private buttonText:string;

    constructor()
    {
        this.buttonText = 'A new button';
        this.create();
    }

    private create()
    {
        this.html = "<button (click)='new()'>" + this.buttonText + "</button>"
    }

    private new()
    {
        this.buttonText = "Text Changed";
    }
}

不起作用的部分是：

this.html = "<button (click)='new()'>" + this.buttonText + "</button>"

此时，Angular 2 不知道如何处理 (click)='new()'。我不确定这样做的正确方法是什么。

我希望以后能够通过一些相应的事件将 HTML 添加到 DOM。

我没有使用过 Angular 1。但听起来这曾经相当于 $compile in Angular 1。其他一些帖子建议使用Dynamic Content Loader 处理此类内容。但这似乎不是这个用例的正确答案。因此，感谢任何帮助或指导。谢谢，

Answer 1

更新建议

import {Component} from '@angular/core';

@Component({
  selector: 'special-button-component',
  template: '<button type="button" (click)="changeText()">{{buttonText}}</button>'
})
export class SpecialButtonComponent{
  public buttonText: string = 'A New Button';
  public changeText(): void{
    this.buttonText = 'Text Changed';
  }
}

@Component({
  selector   : 'sub-child',
  template   : '<form><special-button-component></special-button-component></form>'
})
export class SubChildClass{}

原始答案 （由于从 Angular 2 中删除了 BrowserDomAdapter，因此不再工作）

如果您真的想要绑定到已注入的非模板 DOM 元素，那么您可以使用 Angular2 的一些相当无证的功能以良好的“老式方式”设置事件侦听器

import {Component, ElementRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';

@Component({
  selector   : 'sub-child',
  template   : '<form [innerHTML]="html"></form>'
})
export class SubChildClass
{
  private html:string;
  private buttonText:string;

  constructor(private elementRef: ElementRef, private domAdapter: BrowserDomAdapter)
  {
    this.buttonText = 'A new button';
    this.create();
  }

  private create()
  {
    let button = this.domAdapter.createElement('button');
    button.innerHtml = this.buttonText;
    this.domAdapter.on(button, 'click', this.new.bind(this));
    this.domAdapter.appendChild(this.elementRef.nativeElement, button);
  }

  private new()
  {
    let button = this.domAdapter.querySelector(this.elementRef.nativeElement, 'button');
    button.innerHTML = "Text Changed";
  }
}

但是有什么意义...如果我们只是降到这个级别，为什么要首先使用角度。我还在生产中的企业应用程序中使用 Angular2。我对此功能的选择是将button 本身创建为一个组件，然后使用DynamicComponentLoader 将元素注入。

Answer 2

我使用 ngFor 来重复 DOM。当您按下单击按钮时，将项目添加到数组中。例子： + 组件：

export class AbcComponent {
  billingInforArr: RegisterBillingInfoModel[] = [];

  months: any[] = [];
  years: any[] = [];

  constructor(private fb: FormBuilder, private router: Router) {
    for (let i = 1; i <= 12; i++) {
      this.months.push({ value: i, text: i });
    }

    let today = new Date();
    let year = today.getFullYear();
    for (let i = 1; i <= 10; i++) {
      this.years.push({ value: year + i, text: year + i });
    }

    if (localStorage.getItem('listCard') != null) {
      this.billingInforArr = JSON.parse(localStorage.getItem('listCard'));
    }
  }
  addCard(value: any) {
    this.billingInforArr.push({ Id: Date.now().toString(), NameOnCard: value.name, CardNumber: value.cardNumber, ExpMonth: value.expMonth, ExpYear: value.expYear, Expire: `${value.expMonth}/${value.expYear}` });
    localStorage.setItem('listCard', JSON.stringify(this.billingInforArr));
  }
  removeCard(value: any) {
    console.log(value);
    console.log(this.billingInforArr);

  }
}

• HTML：

<div class="form-group list-credit" *ngFor="let item of billingInforArr">
  <div class="content-credit">
    <i class="material-icons remove" (click)="removeCard(item.Id)">cancel</i>
  </div>
</div>