Question

我必须从服务器加载Html数据，就像我有'点击'

但是当我将此数据分配给angular2中的innerHtml属性时，它会显示html但是click even不起作用。

是否有解决此问题的方法。

有一些使用动态组件的建议，但我没有找到任何有关最终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");
    }

}

Answer 1

如果您以这种方式分配点击处理程序，它将不会引用Angulars组件中的with p as ( SELECT *,ROW_NUMBER() OVER(PARTITION BY family_id ORDER BY family_id) AS rowNum FROM tbl_person ) select nr as row_num, full_name as name, f.family_id from (select top 14 ROW_NUMBER() over (order by (select 1)) nr from sys.all_columns) nrs --use sys table for tallying cross apply (select family_id from p group by family_id) f left join p on p.rowNum = nr and f.family_id = p.family_id order by family_id,nr，而是引用showdata()。 Angular不知道window.showdata()和onclick不知道Angular。

我建议你将HTML添加到组件中，然后查询元素并使用

添加事件处理程序

onclick

虽然constructor(private elRef:ElementRef) {} ngAfterViewInit() { this.elRef.nativeElement.querySelector('button').addEventHandler('click', this.showdata.bind(this); }可能不是代码的正确位置，但取决于添加HTML的时间。

Answer 2

我的建议是使用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>

它为我工作。

从动态添加的html中触发事件

2 个答案: