Angular 2使用数据编译动态模板
我正在为jquery网格控件开发类似接口的桥接器。 使用以下语法呈现网格并按预期工作。
... ... 在t-column标签内提供渲染模板的支持时，我能够获取数据和jquery元素。
jQuery元素
现在，该按钮显示template文本。 如何动态更改来自gridData的输入元素值。
export class TemplateElement { private context: any; __parent: tComponents; constructor(protected el: ElementRef) { } ngOnInit() { template.render = (self, selector, data, index, prop) => { let templateObject = self.angularTemplate; if (!templateObject || !templateObject[selector]) { templateObject = templateObject || {}; templateObject[selector] = { key: t.getGuid('angulartmpl'), itemData: [], views: [] }; self.angularTemplate = templateObject; } let scope = templateObject[selector]; if (!t.isNullOrUndefined(index)) { if (!scope.itemData) scope.itemData = []; scope.itemData[index] = data; } else { scope.itemData = [data]; } let actElement = $(this.el.nativeElement).html(); let tempElement = "" + actElement + ''; return tempElement; } } ngAfterViewInit() { this.compileTempalte(); } compileTempalte() { let element = this.__parent.widget.element; let templates = $(element).find('.t-angular-template'); let templateObject = this.__parent.widget.angularTemplate; for (let template in templateObject) { let tmplElement = templates.filter('.' + templateObject[template].key); if (tmplElement.length) { for (let i = 0; i < tmplElement.length; i++) { //modified code childView = this.viewContainerRef.createEmbeddedView(this.templateRef, { '$implicit': templateObject[template].itemData[i] }); this.childViews[i] = childView; $(tmplElement[i]).append(childView.rootNodes); } } else { delete templateObject[template]; } } } clearTempalte() { let templateObject = this.__parent.widget.angularTemplate; if (templateObject && Object.keys(templateObject).length) { for (let tmpl in templateObject) { delete templateObject[tmpl]; } } } ngOnDestroy(){ this.clearTempalte() }
}
如上所述，您需要使用transclusion：
- http://toddmotto.com/transclusion-in-angular-2-with-ng-content
- 使用Angular2创建具有ng-content transclusion的动态转发器
你需要在这部分添加let-item =“$ implicit”：
如果要将变量分配给属性，则需要使用括号语法：
[]表示将变量Template分配给input元素的value属性。
如下所述： https ： //angular.io/docs/ts/latest/guide/template-syntax.html#！#binding-syntax