Вывод событий из динамически добавленного html

я должен загружать данные Html с сервера, как будто у меня есть «щелчок»,

но когда я присваиваю эти данные свойству innerHtml в angular2, он показывает html, но щелчок даже не работает.

есть ли какое-либо решение этой проблемы.

есть предложения по использованию динамических компонентов, но я не нахожу хороший учебник для окончательной версии angular2.

import { Component,  ViewChild, ElementRef, OnInit, Directive } from '@angular/core';
import { HttpComponent}  from './http.component';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `<div [innerHTML]="myVal"></div>`
})
export class AppComponent {


myVal: string = '<div><button onClick="showdata()"> Show Data </button></div>';

constructor(){}

    showdata(){
        console.log("test");
    }

}

angular,release,final,

2

Ответов: 2

1

Мое предложение - использовать JavaScript для прослушивания события click и получить элемент по id:

составная часть:

ngOnInit() {
    var myVal = document.getElementById("myVal");
    myVal.innerHTML = '<div><button id="btn"> Show Data </button></div>'; 
    document.getElementById("btn").addEventListener("click", function(){
        console.log("Button clicked, do something.");
});
}

шаблон:

<div id="myVal"></div>

Он работает на меня.

1

Если вы назначите обработчик кликов таким образом, он не будет ссылаться на showdata()компонент Angulars, но для window.showdata(). Угловой не знает onclickи onclickне знает об Угловом.

Я бы предложил вам добавить HTML к компоненту, затем запросить элемент и добавить обработчик события, используя

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('button').addEventHandler('click', this.showdata.bind(this);
}

Хотя, ngAfterViewInit()возможно, это не место для кода, в зависимости от того, когда HTML добавлен.

Угловой, выпуск, конечный,
Похожие вопросы
Яндекс.Метрика