代码之家  ›  专栏  ›  技术社区  ›  Zero

如何使用angular2和Typescript从HTMLElement获取样式值

  •  1
  • Zero  · 技术社区  · 8 年前

    可以从HTMLElement读取值吗?

    以下代码可以工作,但在向后转换中有一点延迟。这就是我需要从_target元素得到高度值的点。

    import {
    Directive, Input, Renderer, OnInit, ElementRef, TemplateRef
    } from '@angular/core';
    
    @Directive({
    selector: '[accordion]'
    
    })
    export class AccordionDirective implements OnInit{
       private _listener:Function;
       private _active = false;
       private _height;
    
       @Input('accordion') _target:HTMLElement;
    
       constructor(private _renderer:Renderer,
                   private element:ElementRef) {
       }
    
       ngOnInit() {
    
        this._renderer.setElementStyle(this._target, 'max-height', '0em');
        this._renderer.setElementClass(this._target, 'slider', true); // set css transition to the target element
    
        this._listener = this._renderer.listen(this.element.nativeElement, 'click', () => {
    
            if(!this._active){
                this._renderer.setElementStyle(this._target, 'max-height', '50em'); <-- here is the variable height needed
            }else{
                this._renderer.setElementStyle(this._target, 'max-height', '0em');
            }
            this._active = !this._active;
            });
         }
       }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Zero    8 年前

    这就是这个问题的解决方案。

    import {
      Directive, Input, Renderer, OnInit, ElementRef, TemplateRef
    } from '@angular/core';
    
    @Directive({
      selector: '[accordion]'
    
    })
    
    export class AccordionDirective implements OnInit{
      private _listener:Function;
      private _active = false;
      private _height;
      private _maxHeight;
    
      @Input('accordion') _target:HTMLElement;
    
      constructor(private _renderer:Renderer,
               private element:ElementRef) {}
    
      ngOnInit() {
      this._maxHeight = this._target.scrollHeight;
      this._renderer.setElementStyle(this._target, 'max-height', '0em');
      this._renderer.setElementClass(this._target, 'slider', true);
    
      this._listener = this._renderer.listen(this.element.nativeElement, 'click', () => {
    
        if(!this._active){
            this._renderer.setElementStyle(this._target, 'max-height', this._maxHeight + 'px');
        }else{
            this._renderer.setElementStyle(this._target, 'max-height', '0em');
        }
        this._active = !this._active;
        });
      }
    }