Angular 2 innerHTML(点击)绑定(bind)

Question

我有一个非常大的 html 菜单，所以我决定绑定(bind)以便能够制作多个子菜单下拉菜单并避免 html 代码重复。 parent > child (也是 parent )> child ......

对于上下文:在 ng2_msList/msList.components.ts 中，ColumnsManagements.ts 被导入为 this.ColumnsManagementInstance。innerHTML 菜单在 ng2_msList/pages/list.html 中正确显示:

<!-- COLUMNS DROPDOWN BUTTON -->
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul>

使用(在我的代码的一个非常简化的版本中):(感谢这个 Stack Q)

setHtmlColumnsMenu() {
     var self = this;
     var htmlcolumnsmenu = '';
     [...]
     htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true));

     // which return something like a lot of html content and sometime in it : 
     // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)">
     [...]
     return htmlcolumnsmenu;
}

但是 (click)="msList.ColumnsManagementInstance.toogleColumn(column)"(以前在 html 内容中)不再起作用。它在 View 中作为标记中的简单文本编写(在未显示 innerHtml 之前)。

我无法找到让它再次工作的方法。我测试了多种调用函数的方法，或者我在网络链接中找到的方式，如 Ang Doc Section , here例如。这些示例很容易调用在同一文件/上下文中设置的函数 (click)="MyAction()"但在我的上下文中我无法正确调用它。

应用程序架构可能不像 Angular2 的点击调用所期望的那样。

Answer 1

这是设计使然。 Angular 不会以任何方式处理由 [innerHTML]="..." 添加的 HTML(清理除外)。它只是将其传递给浏览器，仅此而已。

如果您想动态添加包含绑定(bind)的 HTML，您需要将其包装在 Angular2 组件中，然后您可以使用例如 ViewContainerRef.createComponent()

添加它

有关完整示例，请参阅 Angular 2 dynamic tabs with user-click chosen components

Angulary 较少的方法是注入(inject) ElementRef，使用

访问添加的 HTML

elementRef.nativeElement.querySelector('a').addEventListener(...)