[英]Dynamic Component Click Event Binding Angular2
In my project I'm loading some elements dynamically.But I'm not able to generate click events for that elements. 在我的项目中,我正在动态加载一些元素。但是我无法为这些元素生成点击事件。
import {Component, DynamicComponentLoader, Injector} from 'angular2/core';
@Component({
selector: 'my-app',
providers: [],
template: `
<button (click)="form()">
View Form
</button>
<div id="form" [innerHTML]="">
Welcome..! Here form component will be loaded.
</div>
`,
directives: []
})
export class App {
private strForMarkets = "";
private sbForMarkets: Array<string> = [];
constructor(public dcl:DynamicComponentLoader, public _injector:Injector) {
}
form() {
var s = ["a", "s", "d", "p"];
this.sbForMarkets.push("<div><ul>")
for (var index = 0; index < s.length; index++) {
var element = s[index];
this.sbForMarkets.push("<li class='OH liDataLeftFilterMarketsContainer'>");
this.sbForMarkets.push("<div class='FL sprite_icon expand-icon-market'></div>");
this.sbForMarkets.push("<div class='expand-text-div CP FT14 LH15' (click)='chill($event)' >" + element + "</div>");
this.sbForMarkets.push("</li>");
}
this.sbForMarkets.push("</ul></div>");
this.strForMarkets = this.sbForMarkets.join("");
}
chill() {
console.log("Dude... Chill ");
}
}
ps I have tried with dynamic component loader but it works if all html in template only. ps我尝试过使用动态组件加载器,但只有模板中的所有html才有效。
Angular2 doesn't process HTML added dynamically using [innerHTML]="..."
or similar in any way (click)
is just ignored and added as-is. Angular2不处理使用
[innerHTML]="..."
动态添加的HTML或类似的任何方式(click)
被忽略并按原样添加。
If possible wrap the HTML in a component and use ViewContainerRef.createComponent()
instead. 如果可能,将HTML包装在组件中并使用
ViewContainerRef.createComponent()
代替。 For an example see Angular 2 dynamic tabs with user-click chosen components 有关示例,请参阅Angular 2动态选项卡,其中包含用户单击所选组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.