用数据编译动态模板

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

如前所述，您需要使用transclusion：

• 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>

Answer 2

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

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

[]意味着变量Template将分配给input元素的value属性。

正如这里所解释的：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax