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

Question

是否可以从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; 
     }); 
    } 
    } 

Answer 1

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

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

Answer 2

使用ngClass/ngStyle添加&删除类/风格