Angular 2 用数据编译动态模板

Question

我正在为 jquery 网格控件开发类似桥的界面。网格使用以下语法呈现并按预期工作。

<t-grid>
  <t-column>...</t-column>
  <t-column>...</t-column>
</t-grid>

在提供对 t-column 标记内呈现模板的支持时，我能够获取数据和 jquery 元素。

jQuery 元素

<div class="angulartmplbda8aedb-6b16-456d-8c17-3240a674b0c7 angular-template">
   <div _ngcontent-ila-1="">
     <input _ngcontent-ila-1="" type="button" value="Template"></div>
 </div>

现在，按钮显示为template 文本。如何动态改变来自gridData的输入元素值？

 export class TemplateElement {
private context: any;
__parent: tComponents<any, any>; 
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 = "<div class='" + templateObject[selector].key + " t-angular-template'>" + actElement + '</div>';
        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()
}

}

Answer 1

如果要将变量分配给属性，则需要使用括号语法：

     <input _ngcontent-ila-1="" type="button" [value]="Template"></div>

[] 表示变量Template 将分配给input 元素的value 属性。

如此处所述： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

Answer 2

如前所述，您需要使用嵌入：

• http://toddmotto.com/transclusion-in-angular-2-with-ng-content
• Creating a dynamic repeater with ng-content transclusion with Angular2

并且您需要在这部分添加 let-item="$implicit" ：

<template t-template let-item="$implicit">
    <input t-button [value]="item.CustomerID" />
</template>