TypeScript Renderer2.createElement方法代碼示例

 ngAfterViewInit() {
   this.preNode = this._renderer.createElement('pre');
   this.codeNode = this._renderer.createElement('code');
   this._renderer.addClass(this.codeNode, 'language-' + this.language);
   this._renderer.appendChild(this.nativeElement, this.preNode);
   this._renderer.appendChild(this.preNode, this.codeNode);
   this.codeNode.textContent = this.code;
   Prism.highlightElement(this.codeNode);
 }

 ngOnInit() {
   this.iElement = this.renderer.createElement('i');
   this.renderer.addClass(this.iElement, 'icon-prepend');
   this.renderer.addClass(this.iElement, 'fa');
   this.renderer.appendChild(this.elementRef.nativeElement, this.iElement);
   this.update();
 }

 ngOnInit() {
   const iElement = this.renderer.createElement('i');
   this.renderer.addClass(iElement, 'icon-prepend');
   this.renderer.addClass(iElement, 'fa');
   this.renderer.addClass(iElement, 'fa-clipboard');
   this.renderer.appendChild(this.elementRef.nativeElement, iElement);
 }

 setLabel(): void {
     if (!this.floatingLabel) {
         this.floatingLabel = this.renderer2.createElement('label');
         this.renderer2.appendChild(this.hostNativeElement, this.floatingLabel);
     }
     this.floatingLabel.innerHTML = this.label;
 }

 ngOnInit() {
   this.inputElement = document.getElementById(this.cdPasswordButton);
   this.iElement = this.renderer.createElement('i');
   this.renderer.addClass(this.iElement, 'icon-prepend');
   this.renderer.addClass(this.iElement, 'fa');
   this.renderer.appendChild(this.el.nativeElement, this.iElement);
   this.update();
 }

  ngOnInit() {
    this.renderer.setStyle(
      this.element.nativeElement, 'font-size','2em'
    );
    this.renderer.setStyle(
      this.element.nativeElement, 'color','yellow'
    );
    this.renderer.addClass(this.element.nativeElement, 'ok')    

    const h1 = this.renderer.createElement('h1');
    const text = this.renderer.createText('Click here to add h1');    
    this.renderer.appendChild(h1, text);

    this.renderer.appendChild(this.element.nativeElement, h1);

  }

 ngOnInit(): void {
   // save old overflow
   if (this.lockScroll) {
     this.cacheOverflow = this.window.getComputedStyle(this.document.body).overflow
   }
   this.cacheModalElement = this.renderer.createElement('div')
   this.renderer.setAttribute(this.cacheModalElement, 'class', 'v-modal')
   this.renderer.setStyle(this.cacheModalElement, 'z-index', this.modalZindex)
   this.renderer.setStyle(this.cacheModalElement, 'display', this.visible ? 'block' : 'none')
   this.document.body.appendChild(this.cacheModalElement)
   // listen esc
   if (this.closeOnPressEscape) {
     this.globalListenFunc = this.renderer.listen(
     'document', 'keydown', (event: KeyboardEvent) => {
       this.visible && event.keyCode === 27 && this.closeHandler()
     })
   }
 }

  createScript(src: string, renderer: Renderer2, elmRef?: ElementRef, callback?: () => void): HTMLScriptElement {
    const script = elmRef ? renderer.createElement('script') :
      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();
        }
      };
    }
    renderer.appendChild(elmRef.nativeElement, script);
    return script;
  }

  createRipple(event) {
    if (this.rippleContainer.firstChild) {
      this.removeRipple();
    }

    const width = this.el.nativeElement.offsetWidth;
    const height = this.el.nativeElement.offsetHeight;
    const size = width > height ? width : height;
    const pos = this.el.nativeElement.getBoundingClientRect();
    const x = event.pageX - pos.left - (size / 2);
    const y = event.pageY - pos.top - (size / 2);

    const ripple = this.renderer.createElement('span');
    const style = {
      'top': y,
      'left': x,
      'height': size,
      'width': size
    };

    this.setRippleStyle(style, ripple);
    this.renderer.appendChild(this.rippleContainer, ripple);
  }

 createRippleContainer() {
   this.rippleContainer = this.renderer.createElement('div');
   this.renderer.appendChild(this.el.nativeElement, this.rippleContainer);
 }

 private createElement(r: Renderer2, name: string, namespace: string, id: number) {
   this._renderStore.store(r.createElement(name, namespace), id);
 }