Событие Dynami c inner html не работает в Angular 8 - PullRequest
Новая
       24

Событие Dynami c inner html не работает в Angular 8

0 голосов
/ 21 января 2020

Это мой код

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 имеет внутренние значения html в своем дочернем элементе составная часть. Внутренний html также имеет событие Click, которое не работает.

Я хочу заполнить ввод и нажать кнопку Send event to parent. Но событие не было инициировано.

Уважаемые разработчики, пожалуйста, помогите мне

1 Ответ

1 голос
/ 21 января 2020

Вы кодируете "angular" в строковом значении и затем помещаете его в DOM. Код angular необходимо скомпилировать, чтобы преобразовать в реальный html / js код

Таким образом, вам нужно начать с написания «onclick» вместо «(click)», но тогда у вас будет другая ошибка например, «_sendDataToParent не определен», потому что для этой функции вам понадобится тег «script»

См. здесь, чтобы проверить https://stackblitz.com/edit/angular-4s9fzs

В конце вы получите angular код в строке и затем помещение его в DOM - это, вероятно, то, что вы не хотите делать

...