Angular 2 innerHTML（点击）绑定

我有这么大的HTML菜单，我决定绑定到能够做出几个子菜单下拉菜单，并避免重复html代码。父项>子项（也就是父项）>子项...Angular 2 innerHTML（点击）绑定

对于上下文：在ng2_msList/msList.components.ts中，ColumnsManagements.ts作为this.ColumnsManagementInstance导入。的innerHTML菜单显示正常，在ng2_msList /页/ 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; 
}

但（点击）=“msList.ColumnsManagementInstance.toogleColumn（列）”（之前在html内容中）不再有效。它在视图中以标记中的简单文本（在innerHtml未显示之前）写入。

我无法达到使其再次工作的方式。我测试了多种调用函数的方式，或者我在网页链接中找到的例子如Ang Doc Section，here。这些示例非常简单地调用一个在同一个文件/上下文中设置的函数（点击）=“MyAction（）”，但是使用我的上下文我无法正确调用它。

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

来源

2016-06-07 Paul Leclerc

这是设计。 Angular不以任何方式处理由[innerHTML]="..."（卫生除外）添加的HTML。它只是传递给浏览器，就是这样。

如果要动态添加HTML包含你需要用它在Angular2组件绑定，那么你可以使用例如ViewContainerRef.createComponent()

将其添加为一个完整的例子看Angular 2 dynamic tabs with user-click chosen components

一个不太Angulary方法是将注入ElementRef，访问使用

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

来源

2016-06-07 10:28:47

我们需要听到的是并不总是我们希望听到：/ 谢谢你，这当然是我需要的，甚至意味着我错了;）接受！ –

它可能为时已晚，但让我希望是要帮助别人添加的HTML。

既然你想点击绑定（也可能是其他绑定），这将是更好的使用和[innerHTML]="..."创建内部构件到您通过@Input()注释传递数据跳过。

具体，形象，你有一个名为BaseComponent在其中设置一些HTML代码的变量htmlData组件：在BaseComponent的HTML文件时，

let htmlData = '...<button (click)="yourMethodThatWontBeCalled()">Action</button>...'

然后将其绑定象下面这样：

...<div [innerHTML]="htmlData"></div>...

而不是做这个的，为您打造InnerComponent。TS：

@Component({ 
selector: 'inner-component', 
templateUrl: './inner-component.html', 
styleUrls: ['./inner-component.scss'] 
}) 
export class InnerComponent { 
    @Input() 
    inputData: any; 

    methodThatWillBeCalled(){ 
    //do you logic on this.inputData 
    } 
}

InnerComponent的HTML文件：现在

...<button (click)="methodThatWillBeCalled()">Action</button>...

在BaseComponent的HTML文件：

...<inner-component [inputData]="PUT_HERE_YOUR_DATA"></inner-component>

来源

2018-01-30 14:29:10 Mitchapp

Angular 2 innerHTML（点击）绑定

回答

相关问题