这就是这个问题的解决方案。
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;
});
}
}