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

这是我的密码

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);
  }
}

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还具有不起作用的单击事件

我想填写输入并单击Send event to parent按钮。但事件并未触发

---

亲爱的开发人员请帮助我

您正在用字符串值编码angular，然后将其放入DOM中。 需要编译angular代码才能转换为真正的html/js代码

因此，您需要从编写onclick而不是click开始 但随后会出现其他错误，如_sendDataToParent未定义，因为您需要该函数的脚本标记

请参见此处进行测试

---

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

朋友们，请任何人指导我的回答。当我键入输入文本并单击“发送到父级”按钮时，出现如下错误：错误发生1:1\u sendDataToParent未定义是，如我的注释中所述，您需要其他更改才能使其正常工作，因为它不再是棱角分明的，而是简单的html答：但是您会遇到其他错误，如_sendDataToParent未定义，因为您需要在脚本中使用该函数标记抱歉，这不是我真正想要的。我还想通过这个函数传递一些参数。是否仍然可以使用单击而不是onclick使其工作

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

<hr>
<hr>
<hr>

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

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;
  }
}