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

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

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

How get style values from a HTMLElement with angular2 and Typescript

directive

angular2-directives

angular2-template

angular