动态内部html事件在Angular 8中不起作用

Question

这些是我的代码

child.component.ts

import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
})
export class ChildComponent implements OnInit {
  @Input() dataFromParent: String;
  @Output() sendDataToParent = new EventEmitter<string>();
  htmldata:any;

  constructor(private sanitizer: DomSanitizer){

  }

  ngOnInit() {
    this.htmldata = '<input type="text" #data><button (click)="_sendDataToParent(data.value)">Send event to parent</button>';

    console.log('This is data from parents', this.dataFromParent);
    console.log('this.htmldata', this.htmldata);
  }

  _sendDataToParent(data:string) {
    console.log('you clicked');
    this.sendDataToParent.emit(data);
  }

  makeSanitize(str: any)
  {
    return this.sanitizer.bypassSecurityTrustHtml(str);
  }
}

child.component.html

<h2>Child Component</h2>
<p>{{dataFromParent}}</p>
<span [innerHTML]="makeSanitize(htmldata)"></span>

app.component.html

<h2>Parent Component</h2>
<p>
    {{dataFromChild}}
</p>

<hr>
<hr>
<hr>

<child-component 
  [dataFromParent]="'This is data sent from parent'"
  (sendDataToParent)="eventFromChild($event)">
</child-component>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  dataFromChild;
  eventFromChild(data) {
    console.log(data);
    this.dataFromChild = data;
  }
}

我计划动态生成htmldata。

htmldata在其子组件中具有innerhtml值。 Innerhtml的Click事件也不起作用。

我要填写输入，然后单击Send event to parent按钮。但是事件未触发。

亲爱的开发人员，请帮助我

Answer 1

您正在用字符串值编码“角度”，然后将其放入DOM。需要编译角度代码以将其转换为实际的html / js代码

因此您需要首先编写“ onclick”而不是“（click）”但随后您将遇到其他错误，例如“未定义_sendDataToParent”，因为您需要该函数带有“脚本”标记]

请参见此处测试https://stackblitz.com/edit/angular-4s9fzs

最后，在字符串中生成角度代码，然后将其放入DOM中，您可能不想这样做