将 html 附加到 div javascript 并将 typescript 函数绑定到（单击）事件不起作用答案

【问题标题】：Append html to div javascript and bind typescript function to a (click) event not working将 html 附加到 div javascript 并将 typescript 函数绑定到（单击）事件不起作用
【发布时间】：2018-02-15 11:41:17
【问题描述】：

我有一个外部 javascript 文件，我有一个将 HTML 附加到 siteLayoutComponent.html DIV 的函数，如下代码：

function LoadNotificationData(data) {
        $("#lstNotification").append(' <li id="' + data.id + '"><a (click)="logout()"><i class="fa fa-sign-out fa-fw" "></i>' + data.subject + '</a></li> <li id="dv' + data.id + '" class="divider"></li>')     
}

siteLayoutComponent.ts 中的注销函数

logout() {    
this.router.navigate(['/login']);
}

检查生成的代码后，我们可以意识到事件没有以正确的方式呈现，我需要在附加的 HTML 中动态执行此绑定。任何想法

【问题讨论】：

stackoverflow.com/questions/35296704/… 的可能重复项
你为什么要动态附加<li>？它应该始终存在，如果应该隐藏则隐藏。
“在检查生成的代码后，我们可以意识到事件没有以正确的方式呈现”。它是如何渲染的，为什么会这样？
旁注：我个人避免将 HTML 与 Javascript 混合使用。如果我必须用 jQuery 编写这个，我会使用 $li.append($("<a>").click(logout));

标签： javascript html angular typescript angular2-routing

【解决方案1】：

我更喜欢使用 angular2 指令而不是 jquery append，因为这是在 angular2 中工作的正确方法，例如：

// 可能是 json 列表或列表 this.data = [{id:1212,subject:"login"},{id:1212,subject:"logout"}];

您可以从该变量中推送您的数据，并代表该数据变量，您可以创建您的列表，如随附的屏幕截图中所示。

谢谢

【讨论】：