TypeScript Renderer.setElementAttribute方法代碼示例

  /**
   * 獲得一個canvas
   * @param  {Renderer} renderer 一個renderer
   * @param  {string} elem canvas的父元素的字符
   * @param  {string} width='800px' 畫布寬度
   * @param  {string} height='600px' 畫布高度
   * @param  {string} bgColor='' 畫布背景色
   */
  creatCanvas(renderer: Renderer, elem: string, width = '800', height = '600', bgColor = '', bgImg?: any) {
    let gamev = document.createElement('canvas');

    renderer.setElementStyle(gamev, 'display', 'block');
    renderer.setElementAttribute(gamev, 'width', width);
    renderer.setElementAttribute(gamev, 'height', height);
    renderer.setElementStyle(gamev, 'position', 'absolute');
    renderer.setElementStyle(gamev, 'left', '0');
    renderer.setElementStyle(gamev, 'top', '0');

    renderer.setElementStyle(gamev, 'zIndex', '10000');
    renderer.setElementStyle(gamev, 'margin', '0 auto');
    renderer.setElementStyle(gamev, 'backgroundColor', bgColor);
    if (bgImg) {
      renderer.setElementStyle(gamev, 'backgroundImage', `url(${bgImg})`);
    }

    let prarentElement = renderer.selectRootElement(elem);
    renderer.projectNodes(prarentElement, [gamev]);

    this.width = parseInt(width);
    this.height = parseInt(height);
    this.glCanvas = gamev.getContext('2d');
    
    this.mydraw.setglCanvas(this.glCanvas);
  }

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

 constructor(
   public platform: Platform,
   public elementRef: ElementRef,
   public renderer: Renderer) {
   this.isAndroid = platform.is('android');
   renderer.setElementAttribute(elementRef.nativeElement, 'primary', this.isAndroid ? '' : null);
 }

  validate(): void {
    let valid = this.validationService.validate(this.field, this.checkValue);

    this.field.valid = valid;
    let error = this.field.validationErrors.toString();

    this.renderer.setElementClass(this.el.nativeElement, 'validation-bad', !valid);
    this.renderer.setElementAttribute(this.el.nativeElement, 'title', error);
  }

  @HostListener('click')
  onClick() {
    let copied;
    if (this.copyText) {
      copied = Clipboard.copyCustom(this.copyText);
    } else {
      copied = Clipboard.copyElement(this.copyElement);
    }

    if (copied) {
      this.renderer.setElementAttribute(this.element.nativeElement, 'data-hint', 'Copied!');
    } else {
      let hintElem = this.hintElement || this.copyElement;
      if (!hintElem) return;
      this.renderer.setElementAttribute(hintElem, 'data-hint', 'Press "ctrl + c" to copy');
      this.renderer.setElementClass(hintElem, 'hint--top', true);
      this.renderer.setElementClass(hintElem, 'hint--always', true);
    }
  }

    ngOnInit() {
        console.log('start', this.inputAttribut);
        console.log('mode', this.inputAttribut.mode);
        console.log('iod', this.inputAttribut.iod);
        if ((this.inputAttribut.code in Globalvar.IODPLACEHOLDERS) && _.hasIn(Globalvar.IODPLACEHOLDERS[this.inputAttribut.code], this.inputAttribut.mode)){
            if (Globalvar.IODPLACEHOLDERS[this.inputAttribut.code][this.inputAttribut.mode].action === 'replace' && this.el.nativeElement.tagName === 'INPUT'){
                this.renderer.setElementAttribute(this.el.nativeElement, 'placeholder', Globalvar.IODPLACEHOLDERS[this.inputAttribut.code][this.inputAttribut.mode].placeholder);
                this.renderer.setElementAttribute(this.el.nativeElement, 'title', Globalvar.IODPLACEHOLDERS[this.inputAttribut.code][this.inputAttribut.mode].placeholder);
            }
            if (Globalvar.IODPLACEHOLDERS[this.inputAttribut.code][this.inputAttribut.mode].action === 'disable'){
                this.disableElement();
            }
        }else{
            if (this.inputAttribut.iod && !_.hasIn(this.inputAttribut.iod, this.inputAttribut.code)){
                this.disableElement();
            }
            this.renderer.setElementAttribute(this.el.nativeElement, 'placeholder', this.inputAttribut.name);
        }

    }

 changeColor(color:number){
   // this.renderer.setElementAttribute(this.elementRef.nativeElement, 'fill', this.hotDeploymentService.RGBToHex(color, 255, 255));
   this.renderer.setElementAttribute(this.elementRef.nativeElement, 'fill', 'rgba(255, 0, 0,'+color+')');
 }

 private expand(rows: number): void {
     this.renderer.setElementAttribute(this.el.nativeElement, 'rows', rows.toString());
 }

 this.loadAndRender(this.phContent, (s) => {
   this.renderer.setElementAttribute(this.el.nativeElement, 'placeholder', s);
 });

 ngOnInit () {
   if (!Clipboard.isSupported()) {
     this.element.nativeElement.parentNode.removeChild(this.element.nativeElement);
   }
   this.renderer.setElementAttribute(this.element.nativeElement, 'data-hint', 'Copy to Clipboard!');
 }