angular5自适应窗口大小 - jec

angular5自适应窗口大小

import {AfterViewInit, Directive, ElementRef, HostBinding, HostListener, Inject, Input, Renderer2} from \'@angular/core\';
import {DOCUMENT} from \'@angular/common\';

@Directive({
    selector: \'[fixWindow]\'
})
export class FixWindowDirective implements AfterViewInit {
    private bodyEl;
    @Input() marginBottom = 24;
    @Input() minWidth = 400;
    @HostBinding(\'style.height.px\') height = 400;

    @HostListener(\'window:resize\') onResize() {
        // 窗口自适应大小
        let height = this.bodyEl.getBoundingClientRect().height - this.el.nativeElement.getBoundingClientRect().top - this.marginBottom;
        if (height < this.minWidth) {
            height = this.minWidth;
        }
        this.height = height;
    }

    constructor(private el: ElementRef, private ren2: Renderer2, @Inject(DOCUMENT) private doc: Document) {
    }

    ngAfterViewInit() {
        this.bodyEl = this.doc.querySelector(\'body\');
        // fix bug: Expression has changed after it was checked.
        setTimeout(() => this.onResize(), 500);
    }
}