Angular 2 innerHTML(点击)绑定 [英] Angular 2 innerHTML (click) binding

问题描述

我有一个很大的 html 菜单，我决定绑定以便能够创建多个子菜单下拉菜单并避免 html 代码重复.父 > 子(也是父)> 子...

I had such a large html menu that I decided to binding to be able to make several submenu dropdown and avoid html code duplication. Parent > child (which is parent too) > child...

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

For the context : In ng2_msList/msList.components.ts, ColumnsManagements.ts is imported as this.ColumnsManagementInstance. The innerHTML menu is displayed properly, in ng2_msList/pages/list.html :

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

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

With (in a very simplified version of my code) : (Thanks to this 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 内容中)不再起作用.它在视图中作为标记中的简单文本写入(在没有显示的 innerHtml 之前).

BUT (click)="msList.ColumnsManagementInstance.toogleColumn(column)" (previously in the html content) is not working anymore. It's writing in the view as simple text in tag (before the innerHtml it was not displayed).

我找不到让它再次工作的方法.我测试了多种调用函数的方法，或者正如我在 Ang Doc Section，例如这里.这些示例非常容易地调用在同一文件/上下文中设置的函数(单击)="MyAction()"，但根据我的上下文，我无法正确调用它.

I can't reach a way to make it works again. I test multiple ways to call the function or as I found in web links as on the Ang Doc Section, here for example. These examples call a function which is set in the same file/context very easily (click)="MyAction()" but with my context I can't get a way to call it properly.

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

The app architecture is maybe be not as Angular2 click call would expect.

推荐答案

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

That's by design. Angular doesn't process HTML added by [innerHTML]="..." (except sanitization) in any way. It just passes it to the browser and that's it.

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

If you want to add HTML dynamically that contains bindings you need to wrap it in a Angular2 component, then you can add it using for example ViewContainerRef.createComponent()

有关完整示例，请参阅 Angular 2带有用户单击所选组件的动态选项卡

For a full example see Angular 2 dynamic tabs with user-click chosen components

一种不太 Angulary 的方法是注入 ElementRef，使用

A less Angulary way would be to inject ElementRef, accessing the added HTML using

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

这篇关于Angular 2 innerHTML(点击)绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！