0

I have got a component with template. In this template I got a button which is making request to server via AJAX to get the new part of current template. I had to get it and append it to one of elements in my HTML template. The part of new HTML code have some variables in ngModel's attribute.

How I can recompile the part of template, to append it in template?

Here is example.

Template:

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

Component:

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();
  }
}

Template that I get from request:

<div class="cdekWidjet">
    <input type="hidden" [(ngModel)]="current_delivery.delivery_extra.value" [value]='{ "tariffId":"{$extra_info.tariffId}", "zipcode":"{$address.zipcode}"}'/>
</div>
Alexander Zakusilo
  • 1,466
  • 3
  • 16
  • 34
  • Is the template you're trying to load completely dynamic, by that I mean you know nothing about it and it can be anything ? – Ploppy Mar 06 '17 at 13:55
  • No not dynamic. I have static template. But when I press the button, I will make request url at server to get right part of template which I want to append inside. – Alexander Zakusilo Mar 06 '17 at 14:03
  • I meant the template your are requesting. – Ploppy Mar 06 '17 at 14:05
  • If The template contains angular2 expressions and is not simply HTML, the angular2 framework simply doesn't support it. You could map a lazy loaded route to a server-side synthesized Ng module , and leverage your loader – Aluan Haddad Mar 06 '17 at 14:07
  • There's no equivalent to angularjs NG bind HTML. Which is to say you can't load a component that is not predeclared inside of an Ng module decorator factor, let alone a stand-alone template. – Aluan Haddad Mar 06 '17 at 14:08
  • If you only wanted display static HTML, that does not contain any angular templates syntax then you can do it – Aluan Haddad Mar 06 '17 at 14:12
  • I updated my post. – Alexander Zakusilo Mar 06 '17 at 14:19
  • Angular2 doesn't support that. since your template contains an angular data binding expression it must be statically declared as the template for a statically NG module registered components. FYI there are a lot of issues on GitHub asking for this and they've all been flat-out refuse. – Aluan Haddad Mar 06 '17 at 14:29

0 Answers0