Angular 6 - 将编译后创建的 HTML 绑定到单击事件答案

【问题标题】：Angular 6 - bind HTML created after compilation to click eventAngular 6 - 将编译后创建的 HTML 绑定到单击事件
【发布时间】：2018-12-04 11:06:00
【问题描述】：

当用户单击按钮时，我会在运行时添加 HTML 元素。

我通过将 div 的内部 html 设置为构建的字符串然后使用 DOMSanitizer 来做到这一点。

视觉上看起来不错，但是新 HTML 中的点击事件没有绑定，所以没有任何效果，我猜是因为 HTML 是在编译后生成的。

这是当用户点击添加新组件时调用的代码（它会填充正确的数据），谁能建议我应该如何将它连接到删除图像中的点击事件？

页面上的html：

<div class="col-sm-9" >
      <div [innerHtml]="contentHtml"></div>
</div>

代码：

async AddText(contentText: string) {
    this.htmlToAdd = this.htmlToAdd + ( '<br> <div class="card text-left">' +
    '<div class="card-header text-secondary">Attraction Text' +
      '<img  align="right" class="image-hover pull-right table-header-padding" src="assets/images/LockLineIcon.png" />' +
      '<img #delete class="image-hover float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="this.delete(0)"/>' +
    '</div>' +
    '<div class="card-body" >' +

    '<textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" >' + contentText + '</textarea>' +
    '</div>' +
    '<div class="card-footer">' +
      '<img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />' +
    '</div>' +
  '</div>');
  this.contentHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlToAdd);
  }

【问题讨论】：

标签： html angular typescript innerhtml

【解决方案1】：

您的 DOM 可能已经过清理，但它不是 Angular DOM 的一部分。如果你想让 Angular 看到 DOM，你必须让 Angular 创建 DOM——这意味着动态组件。像这样的东西会起作用：

@Component({
  selector: 'my-component',
  template: `<h2>Stuff bellow will get dynamically created and injected<h2>
          <div #vc></div>`
})
export class MyComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  private cmpRef: ComponentRef<any>;

  constructor(private compiler: Compiler,
              private injector: Injector,
              private moduleRef: NgModuleRef<any>,
              private backendService: backendService,
              ) {}

  ngAfterViewInit() {
    // Here, get your HTML from wherever.
    this.someService.getThatAsyncHTMLOfYours.subscribe(rawHTML => this.createComponentFromRaw(rawHTML));
  }

  // Here we create the component.
  private createComponentFromRaw(template: string) {
    // Let's say your template looks like `<h2><some-component [data]="data"></some-component>`
    // As you see, it has an (existing) angular component `some-component` and it injects it [data]

    // Now we create a new component. It has that template, and we can even give it data.
    const tmpCmp = Component({ template, styles })(class {
      // the class is anonymous. But it's a quite regular angular class. You could add @Inputs,
      // @Outputs, inject stuff etc.
      data: { some: 'data'};
      ngOnInit() {
        /**
         * HERE'S YOUR STUFF
         * do stuff here in the dynamic component, like binding to locally available variables and services.
         */
      }
    });

【讨论】：