Angular высота и ширина окна

Question

В нескольких компонентах у меня одни и те же методы для пересчета стиля. Например, я использую HomeMainComponent для отображения моей домашней страницы. Он вложен в MainComponent -> CoreComponent -> HomeComponent -> HomeMainComponent:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'main[app-home-main]',
  templateUrl: './home-main.component.html',
  styleUrls: ['home-main.component.scss'],
})
export class HomeMainComponent implements AfterViewInit {
  mainSectionStyles = {};

  constructor() {}

  ngAfterViewInit() {
    this.onInitAndOnResize(null);
  }

  onInitAndOnResize(e) {
    const resultedStyles: any = {
      'box-shadow': 'none',
      'min-height.px': 0,
      'padding-bottom.px': 0,
    };

    setTimeout(() => {
      const navbar = document.getElementById('navbar');
      const starsBlock = document.getElementById('stars');

      resultedStyles.boxShadow = this.getBoxShadow();

      let minHeight = this.getWindowHeigh();
      if (navbar) {
        minHeight = minHeight - navbar.offsetHeight;
      }
      if (starsBlock) {
        resultedStyles['padding-bottom.px'] = starsBlock.offsetHeight;
      }
      resultedStyles['min-height.px'] = minHeight;

      this.mainSectionStyles = Object.assign({}, resultedStyles);
    }, 300);
  }

  private getWindowHeigh() {
    return (
      document.documentElement.clientHeight ||
      window.innerHeight ||
      document.body.clientHeight
    );
  }

  private getBoxShadow() {
    const windowWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    const shadowWidth = windowWidth / 3;
    return 'inset 0 0 ' + shadowWidth + 'px rgba(0, 0, 0, 0.5)';
  }
}

Как видите, я использую метод onInitAndOnResize для пересчета стилей объекта, который я использую в ngStyle. Также я скопировал эти методы для пяти других страниц в моем приложении. Я считаю, что я делаю неправильно, и есть более верный способ сделать это.

Answer 1

Всем спасибо за ответы. Я решил это с помощью директивы:

import {
  Directive,
  ElementRef,
  AfterViewInit,
  HostListener,
} from '@angular/core';

@Directive({
  selector: 'section[#section-bricks]',
})
export class BrickWallStylesDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.setStylesForBrickBlock();
  }

  @HostListener('window:resize')
  onResize() {
    this.setStylesForBrickBlock();
  }

  private setStylesForBrickBlock() {
    this.setDefaultStyles();

    setTimeout(() => {
      const navbar = document.getElementById('navbar');
      const starsBlock = document.getElementById('stars');

      this.el.nativeElement.style.boxShadow = this.getBoxShadow();

      let minHeight = this.getWindowHeigh();
      if (navbar) {
        minHeight = minHeight - navbar.offsetHeight;
      }
      this.el.nativeElement.style.minHeight = `${minHeight}px`;

      if (starsBlock) {
        this.el.nativeElement.style.paddingBottom = `${starsBlock.offsetHeight}px`;
      }
    }, 300);
  }

  private setDefaultStyles() {
    this.el.nativeElement.style.boxShadow = 'none';
    this.el.nativeElement.style.minHeight = '0px';
    this.el.nativeElement.style.paddingBottom = '0px';
  }

  private getWindowHeigh() {
    return (
      document.documentElement.clientHeight ||
      window.innerHeight ||
      document.body.clientHeight
    );
  }

  private getWindowWidth() {
    return (
      document.documentElement.clientWidth ||
      window.innerWidth ||
      document.body.clientWidth
    );
  }

  private getBoxShadow() {
    const windowWidth = this.getWindowWidth();
    const shadowWidth = windowWidth / 3;
    return 'inset 0 0 ' + shadowWidth + 'px rgba(0, 0, 0, 0.5)';
  }
}

Answer 2

Ваш вопрос недостаточно ясен, с вашим кодом мои предложения:

1. используйте HostListener для изменения размера

    @HostListener('window:resize', ['$event'])

    onResize(event) {
      event.target.innerWidth;
    }

Поскольку вы используете машинопись, избегайте ввода типа any, создайте интерфейс Пожалуйста, используйте angular способ получить элемент, взгляните на ViewChild Если вы Если вы хотите поделиться им, вы можете экспортировать функцию, чтобы избежать копирования-вставки в каждый компонент

Наконец, это сбивает с толку, почему вам нужен setTimeout для обновления вашего стиля, css может помочь не?