TypeScript Renderer.createElement方法代碼示例

  @Input('cardInit')
  set delayTime(loading: Observable<any>) {

    // build additional templating for loader
    this.viewContainerRef.createEmbeddedView(this.templateRef);
    var card = this.templateRef.elementRef.nativeElement.nextSibling;
    var lelement = this.renderer.createElement(card, 'md-card-loading-overlay');
    var lanimation = this.renderer.createElement(card, 'md-card-loading-animation');
    this.renderer.setElementClass(lanimation, 'fa', true);
    this.renderer.setElementClass(lanimation, 'fa-spinner', true);
    this.renderer.setElementClass(lanimation, 'fa-pulse', true);
    this.renderer.setElementClass(lanimation, 'fa-3x', true);
    this.renderer.setElementClass(lanimation, 'fa-fw', true);

    // handle data completion
    loading.subscribe(
      () => { },
      error => {
        this.renderer.setElementClass(lanimation, 'hidden', true);
        var errormsg = this.renderer.createElement(lelement, 'h3');
        this.renderer.setText(errormsg, error);
        setTimeout(() => $(lanimation).remove() , 200)        
      },
      () => {
               
        this.renderer.setElementClass(lanimation, 'hidden', true);
        this.renderer.setElementClass(lelement, 'hidden', true);
        setTimeout(() => $(lanimation).remove() , 200)
        setTimeout(() => $(lelement).remove() , 200)
      }
    )
  }

  constructor(private router: Router, eRef: ElementRef, renderer: Renderer, seo: PageTitleService) {
    let parent = eRef.nativeElement.parent;
    let styleElement = renderer.createElement(parent, "style");
    renderer.setElementProperty(styleElement, "type", "text/css");
    renderer.setText(styleElement, mainCss);

    seo.setTitle("Angular-Meteor - realtime full stack JavaScript development");
    seo.setBasePath(global['basePath'] || '/');
  }

    build(): void {
        this.body = document.body;

        let anchor = this.renderer.createElement(this.body, 'a');
        this.renderer.setElementStyle(anchor, 'visibility', 'hidden');
        this.renderer.setElementAttribute(anchor, 'href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(this.csvData));
        this.renderer.setElementAttribute(anchor, 'target', '_blank');
        this.renderer.setElementAttribute(anchor, 'download', this.filename);

        setTimeout(() => {
            this.renderer.invokeElementMethod(anchor, 'click');
            this.renderer.invokeElementMethod(anchor, 'remove');
        }, 15);
    }

    /**
     * proceed the touchStart event on a task (similar to dragStart on html5 dnd api, but we need to create the shadow by ourselves)
     *
     * @param event
     * @param task
     * @param taskEl
     */
    touchStart(event, task, taskEl) {
        event.preventDefault();
        this.currentDndTask = task;
        this.currentTouchTarget = event.target;
        this.currentTouchShadow = this._renderer.createElement(taskEl, 'div', null);
        this.currentTouchShadow.style.position = "fixed";
        this.currentTouchShadow.style.height = taskEl.clientHeight;
        this.currentTouchShadow.style.width = taskEl.clientWidth;
        this.currentTouchShadow.innerHTML = taskEl.innerHTML;

        this.offsetX = event.targetTouches[0].clientX - taskEl.getBoundingClientRect().left;
        this.offsetY = event.targetTouches[0].clientY - taskEl.getBoundingClientRect().top;

        this.currentTouchShadow.style.left = taskEl.getBoundingClientRect().left;
        this.currentTouchShadow.style.top = taskEl.getBoundingClientRect().top;
    }

 jQuery.getJSON(url, ()=> {
     var path = `https://${source}/Snapshots/business${businessId}/station${stationId}/${fileName}.jpg`;
     jQuery(this.elRef.nativeElement).find('.newImage').fadeOut(200);
     var img = this.renderer.createElement(this.elRef.nativeElement, 'img', null);
     jQuery(img).addClass('snap');
     var int$ = Observable.interval(500).do(()=> {
         img.src = path;
     })
     var $err = Observable.fromEvent(img, 'error').do(()=>{
         jQuery(this.elRef.nativeElement).find('.snap').remove();
     })
     var load$ = Observable.fromEvent(img, 'load')
     var subscription = Observable.merge(int$, $err).takeUntil(load$).delay(500).subscribe((res)=> {
         subscription.unsubscribe();
     })
 });

  createScript(src: string, renderer: Renderer, elmRef?: ElementRef, callback?: () => void): HTMLScriptElement {
    let script = elmRef ? renderer.createElement(elmRef.nativeElement, 'script', null) :
      this.getOwnerDocument().createElement('script');

    script.type = 'text/javascript';
    script.src = src;
    script.async = true;
    script.charset = 'UTF-8';
    script.id = `rebirth_script_${Math.random()}`;
    if (callback) {
      script.onreadystatechange = script.onload = () => {
        if ((!script.readyState || /loaded|complete/.test(script.readyState))) {
          callback();
        }
      };
    }
    return script;
  }

 private _createElement(renderer: Renderer, parentElement: any, name: string, elId: number) {
   this._renderStore.store(renderer.createElement(parentElement, name, null), elId);
 }

 error => {
   this.renderer.setElementClass(lanimation, 'hidden', true);
   var errormsg = this.renderer.createElement(lelement, 'h3');
   this.renderer.setText(errormsg, error);
   setTimeout(() => $(lanimation).remove() , 200)        
 },