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的点击呼叫所期望的那样。
这是设计。 Angular不以任何方式处理由[innerHTML]="..."
(卫生除外)添加的HTML。它只是传递给浏览器,就是这样。
如果要动态添加HTML包含你需要用它在Angular2组件绑定,那么你可以使用例如ViewContainerRef.createComponent()
将其添加为一个完整的例子看Angular 2 dynamic tabs with user-click chosen components
一个不太Angulary方法是将注入ElementRef
,访问使用
elementRef.nativeElement.querySelector('a').addEventListener(...)
它可能为时已晚,但让我希望是要帮助别人添加的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>
我们需要听到的是并不总是我们希望听到:/ 谢谢你,这当然是我需要的,甚至意味着我错了;) 接受! –