TypeScript Renderer2.setStyle方法代碼示例

    _onDragend(event){

        this._ox = event.clientX - this._cx + this._elementRef.nativeElement.offsetLeft;
        this._oy = event.clientY - this._cy + this._elementRef.nativeElement.offsetTop;
        this._renderer.setStyle(this._elementRef.nativeElement, 'left', this._ox + 'px');
        this._renderer.setStyle(this._elementRef.nativeElement, 'top', this._oy + 'px');
    }

  /**
   * Sets the proper styles to the ink bar element.
   * @param element
   */
  private _setStyles(element: HTMLElement) {
    const left = element ? (element.offsetLeft || 0) + 'px' : '0';
    const width = element ? (element.offsetWidth || 0) + 'px' : '0';

    this._renderer.setStyle(this._elementRef.nativeElement, 'left', left);
    this._renderer.setStyle(this._elementRef.nativeElement, 'width', width);
  }

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

 clearCellPosition(renderer: Renderer2, el: any): void {
   if (this.gridster.$options.useTransformPositioning) {
     renderer.setStyle(el, 'transform', '');
   } else {
     renderer.setStyle(el, 'top', '');
     renderer.setStyle(el, 'left', '');
   }
 }

 public show(appendToBody: boolean): void {
     this.appendToBody = appendToBody;
     this.renderer.setStyle(this.element.nativeElement, 'display', 'block');
     this.renderer.setStyle(this.element.nativeElement, 'visibility', 'visible');
     this.isVisible = true;
     if (appendToBody) {
         window.addEventListener('scroll', this.scrollHandler);
     }
 }

 setCellPosition(renderer: Renderer2, el: any, x: number, y: number): void {
   if (this.gridster.$options.useTransformPositioning) {
     const transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
     renderer.setStyle(el, 'transform', transform);
   } else {
     renderer.setStyle(el, 'left', this.getLeftMargin() + x + 'px');
     renderer.setStyle(el, 'top', this.getTopMargin() + y + 'px');
   }
 }

   ngAfterViewInit() {
     if (this.isBrowser()) {
       const nativeElement = this.el.nativeElement;
       const options = this.cloudinary.toCloudinaryAttributes(nativeElement.attributes, this.transformations);
       const imageUrl = this.cloudinary.url(this.clBackgroundImage, options);
       this.renderer.setStyle(nativeElement, 'background-image', `url('${imageUrl}')`);
       this.renderer.setStyle(nativeElement, 'background-repeat', 'no-repeat');
       this.renderer.setStyle(nativeElement, 'background-position', 'center');
     }
 }

 ngDoCheck() {
     if (this.isVisible && this.position) {
         const element = this.element.nativeElement;
         const position = Helpers.calcPositionOffset(this.position, element, this.side);
         if (position) {
             this.renderer.setStyle(element, 'top', position.top);
             this.renderer.setStyle(element, 'left', position.left);
             this.renderer.setStyle(element, 'width', position.width);
         }
     }
 }

 private checkRoleAccess(featureEnabled: boolean) {
   const hasRoleAccess = this.authService.securityInfo.canAccess(this.dataflowAppRoles);
   if (!featureEnabled || !hasRoleAccess) {
     this.renderer.setStyle(this.elem.nativeElement, 'display', 'none');
   } else {
     if (this.existingDisplayPropertyValue) {
       this.renderer.setStyle(this.elem.nativeElement, 'display', this.existingDisplayPropertyValue);
     } else {
       this.renderer.removeStyle(this.elem.nativeElement, 'display');
     }
   }
 }

 updateWithVisibleChange(): void {
   // update modal
   if (this.cacheModalElement) {
     // this.cacheModalElement.innerHTML = this.makeModalTmp(this.visible)
     this.renderer.setStyle(this.cacheModalElement, 'display', this.visible ? 'block' : 'none')
   }
   // lock body scroll
   if (this.lockScroll) {
     const nextValue = this.visible ? 'hidden' : this.cacheOverflow
     this.renderer.setStyle(this.document.body, 'overflow', nextValue)
   }
 }