Angular 2使用数据编译动态模板 [英] Angular 2 compile dynamic template with data

问题描述

我正在为jquery网格控件开发类似桥梁的接口.网格使用以下语法呈现，并且可以正常工作.

I am developing bridge like interface for jquery grid control. The grid is rendered with the below syntax and works as expected.

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

虽然在t-column标签内提供了渲染模板的支持，但我能够获取数据和jquery元素.

While providing support to render template inside the t-column tag, I am able to get the data and jquery element.

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的输入元素值??

Now, the button is displayed with template text. How to dynamically change the input element value which is from 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()
}

}

推荐答案

如所讨论的，您需要使用包含:

As discussed, you need to use transclusion:

• http://toddmotto.com/transclusion-in-angular -2-with-ng-content
• 使用Angular2进行ng-content包含

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

您需要在此部分添加let-item ="$ implicit":

And you need to add let-item="$implicit" on this part:

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

这篇关于Angular 2使用数据编译动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！