TypeScript core.Renderer2類代碼示例

 private setContainerClass(isOpen: boolean): void {
     if (isOpen) {
         this.renderer.addClass(this.elementRef.nativeElement, 'drawer-opened');
     } else {
         this.renderer.removeClass(this.elementRef.nativeElement, 'drawer-opened');
     }
 }

 /**
  * [resetBackgroundColor description]
  * @method resetBackgroundColor
  */
 public resetBackgroundColor(): void {
   if (this.currentBackgroundStyle) {
     this.renderer2.removeStyle(this.elementRef.nativeElement, this.currentBackgroundStyle.property, this.currentBackgroundStyle.color);
   } else if (this.currentBackgroundClass) {
     this.renderer2.removeClass(this.elementRef.nativeElement, this.currentBackgroundClass);
   }
 }

 /**
  * [resetFontColor description]
  * @method resetFontColor
  * @return [description]
  */
 public resetFontColor() {
   if (this.currentFontStyle) {
     this.renderer2.removeStyle(this.elementRef.nativeElement, 'color', this.currentFontStyle);
   } else if (this.currentFontClass) {
     this.renderer2.removeClass(this.elementRef.nativeElement, this.currentFontClass);
   }
 }

  handleAction({ target = null, visible = false }) {
    const addClass = visible ? 'active' : 'inactive';
    this.renderer.addClass(target, addClass);

    const rmClass = visible ? 'inactive' : 'active';
    this.renderer.removeClass(target, rmClass);
  }

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

 public ngOnChanges(changes: SimpleChanges) {
   if (this.mdlBadgeContent === null || typeof this.mdlBadgeContent === 'undefined'){
     this.renderer.removeAttribute(this.el, DATA_BADE_ATTR);
     return;
   }
   this.renderer.setAttribute(this.el, DATA_BADE_ATTR, this.mdlBadgeContent);
 }

  alternateColors(input: MdcLinearProgress) {
    const demoInput = 'demo-linear-progress--custom';

    input.elementRef.nativeElement.classList.contains(demoInput) ?
      this._renderer.removeClass(input.elementRef.nativeElement, demoInput)
      : this._renderer.addClass(input.elementRef.nativeElement, demoInput);
  }

 private _setClass(className: string, isAdd: boolean): void {
   if (isAdd) {
     this._renderer.addClass(this._element.nativeElement, className);
   } else {
     this._renderer.removeClass(this._element.nativeElement, className);
   }
 }

    private performTransition():void {
        if (!this._isReady || this._isAnimating || !this._queueFirst) {
            // Don't transition until we are ready, or if we are animating, or if there aren't any transitions in the queue.
            return;
        }

        this._isAnimating = true;

        const transition = this._queueFirst;

        // Set the Semantic UI classes for transitioning.
        transition.classes.forEach(c => this._renderer.addClass(this._element, c));
        this._renderer.addClass(this._element, `animating`);
        this._renderer.addClass(this._element, transition.directionClass);

        // Set the Semantic UI styles for transitioning.
        this._renderer.setStyle(this._element, `animationDuration`, `${transition.duration}ms`);
        this._renderer.setStyle(this._element, `display`, this._display);

        if (transition.direction === TransitionDirection.In) {
            // Unset hidden if we are transitioning in.
            this._isHidden = false;
        }

        // Wait the length of the animation before calling the complete callback.
        this._animationTimeout = window.setTimeout(() => this.finishTransition(transition), transition.duration);
    }

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