Question

我有一个带模板的组件。在这个模板中，我得到了一个按钮，它通过AJAX向服务器发出请求以获取当前模板的新部分。我必须得到它并将其附加到我的HTML模板中的一个元素。新HTML代码的一部分在ngModel属性中有一些变量。

如何重新编译模板的一部分，将其附加到模板中？

这是一个例子。

模板：

＆＃13;

<div class="checkoutAddressWrapper">
  <ion-list *ngIf="delivery_list.length">
    <ion-list-header>
      Delivery
    </ion-list-header>
    <ion-item [ngClass]="{'checked': (delivery.checked)}" *ngFor="let delivery of delivery_list" (click)="onDeliveryChange(delivery)" text-wrap>

        <div id="delivery{{delivery.id}}" class="additionalInfo" *ngIf="delivery.isHaveAdditionalHtml() && (delivery.id == current_delivery.id)">
          <!-- Here is place to insert new HTML -->
        </div>

    </ion-item>
  </ion-list>
</div>

＆＃13;

组件：

＆＃13;

import { Component, Input, ElementRef, AfterViewInit, Compiler } from '@angular/core';
import { AbstractBlock } from "../../abstractblock";
import { HttpRequestService } from "../../../services/httprequestservice";
import { ToastController, Events, NavController, NavParams } from "ionic-angular";
import { AuthService } from "../../../services/authservice";
import { CartService } from "../../../services/cartservice";
import { ConfigService } from "../../../services/configservice";
import { CheckoutService } from "../../../services/checkoutservice";
import { HelperTools } from "../../../services/helpertools";
import { Delivery } from "../../../models/checkout/delivery";
import { Payment } from "../../../models/checkout/payment";
import { Warehouse } from "../../../models/checkout/warehouse";
import { CheckoutWarehousePage } from "../warehousepage";
import { CheckoutConfirmPage } from "../confirmpage";
import { APP_CONFIG } from "../../../app/app.config";
import { Http } from "@angular/http";

@Component({
  selector: 'checkout-blocks-deliverypayment',
  templateUrl: APP_CONFIG.appDomain + '/mobilesiteapp/template/?path=pages/checkout/blocks/deliverypayment' + HelperTools.getTokenParameter()
})

export class CheckoutBlocksDeliveryPayment extends AbstractBlock implements AfterViewInit{

  errors            = []; //список ошибок
  delivery_list     = []; //список доставок
  current_delivery; //Текущая выбранная доставка


  constructor(
              public http: Http,
              public httpRequestService: HttpRequestService,
              public toastCtrl: ToastController,
              public authService: AuthService,
              public _elementRef : ElementRef,
              public compiler : Compiler,
              public cartService: CartService,
              public configService: ConfigService,
              public checkoutService: CheckoutService,
              public navCtrl: NavController,
              public navParams: NavParams,
              public events: Events)
  {
    super(toastCtrl, _elementRef);
    this.current_delivery  = new Delivery();
    let params = {
      filter_by_current_order: 1
    };
    let delivery_info = navParams.get('delivery');
  }


  private fillAdditionalDeliveryHtml()
  {
    setTimeout(() => {
      if (this.delivery_list.length){
        this.delivery_list.forEach((delivery: Delivery) => {
          //If we have additional HTML
          if (delivery.isHaveAdditionalHtml()){
            //Find needed element
            let element = this._elementRef.nativeElement.querySelector("#delivery" + delivery.id);

            //Create fragment
            let fragment = document.createRange().createContextualFragment(delivery.mobilesiteapp_additional_html);
            console.log("fragment", fragment);
            console.log("element", element);
            if (element){
              element.appendChild(fragment);
              this.compiler.clearCache();
              
            }
          }
        });
      }
    }, 1000);
  }


  /**
   * Choose of delivery
   *
   * @param delivery - delivery
   */
  onDeliveryChange(delivery: Delivery)
  {
    //Сбросим выделение
    this.delivery_list.forEach((del: Delivery) => {
      del.checked = false;
    });
    //Установим его
    delivery.checked = true;
    this.current_delivery = delivery;
    let params = {
      filter_by_current_order: 1,
      filter_by_current_delivery: delivery.id
    };
    this.fillAdditionalDeliveryHtml();
  }
}

＆＃13;

我从请求获得的模板：

＆＃13;

<div class="cdekWidjet">
    <input type="hidden" [(ngModel)]="current_delivery.delivery_extra.value" [value]='{ "tariffId":"{$extra_info.tariffId}", "zipcode":"{$address.zipcode}"}'/>
</div>

＆＃13;

如何编译模板的一部分。角度2，离子2

0 个答案: