时间戳

首页 > 解决方案 > 动态内部 html 事件在 Angular 8 中不起作用

angular - 动态内部 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);
  }
}

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按钮。但是事件没有被触发。

亲爱的开发者请帮助我

标签： angulartypescripteventsclickinnerhtml

解决方案

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

因此，您需要从编写“onclick”而不是“（click）”开始但随后您将遇到其他错误，例如“_sendDataToParent 未定义”，因为您需要该函数一个“脚本”标签

见这里测试https://stackblitz.com/edit/angular-4s9fzs

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

推荐阅读