TypeScript Renderer2.addClass方法代碼示例

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

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

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

 constructor(private element: ElementRef,
             private renderer: Renderer2,
             private hostService: HostService,
             private cd: ChangeDetectorRef) {
   this.renderer.addClass(this.element.nativeElement, 'slds-popover');
   this.renderer.addClass(this.element.nativeElement, 'slds-popover_tooltip');
   this.renderer.setAttribute(this.element.nativeElement, 'role', 'tooltip');
 }

 private update() {
   if (this.inputElement.type === 'text') {
     this.renderer.removeClass(this.iElement, 'fa-eye');
     this.renderer.addClass(this.iElement, 'fa-eye-slash');
   } else {
     this.renderer.removeClass(this.iElement, 'fa-eye-slash');
     this.renderer.addClass(this.iElement, 'fa-eye');
   }
 }

 private update() {
   const inputElement = this.getInputElement();
   if (inputElement && inputElement.type === 'text') {
     this.renderer.removeClass(this.iElement, 'fa-eye');
     this.renderer.addClass(this.iElement, 'fa-eye-slash');
   } else {
     this.renderer.removeClass(this.iElement, 'fa-eye-slash');
     this.renderer.addClass(this.iElement, 'fa-eye');
   }
 }

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

  alternateColors(input: MdcRadio) {
    const demoInput = 'demo-radio--custom';

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

  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 setHiddenClass(hideableColumnValue: boolean) {
     if (hideableColumnValue) {
         this._renderer.addClass(this._el.nativeElement, "datagrid-cell--hidden");
     } else {
         this._renderer.removeClass(this._el.nativeElement, "datagrid-cell--hidden");
     }
 }

  alternateColors(icon: MdcIcon) {
    const demoIcon = 'demo-icon-custom-colors';

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

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

 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 updateStatus(add: boolean) {
   if (add) {
     this.renderer.addClass(this.elmRef.nativeElement, 'hidden');
     return;
   }
   this.renderer.removeClass(this.elmRef.nativeElement, 'hidden');
 }