Альтернатива прослушивателя событий с Angular Universal - PullRequest
Новая
       18

Альтернатива прослушивателя событий с Angular Universal

0 голосов
/ 02 мая 2018

У меня проблема с прослушивателем событий в angular universal.

У меня есть компонент документа-страницы, который содержит метод, который вызывается при загрузке изображения: 

<img src="{{pageImage}}" class="{{module.class}}" alt="{{module.alt}}" (load)="calculateImageSize()" #img>

Вот метод компонента, динамически вычисляющий ширину и высоту изображения и обновляющий свойство. 

  calculateImageSize() {
    // Get naturalWidth and naturalHeight of the signature
    this.imgWidth = this.img.nativeElement.naturalWidth;
    this.imgHeight = this.img.nativeElement.naturalHeight;

    // Change pageReady value to display the signatures
    this.pageReady = true;
  }

Я должен сделать это таким образом, потому что я заранее не знаю размер изображения, и мне нужно использовать это значение для позиционирования элементов на странице с этими значениями.

Код работает таким образом с внешним Angular-приложением, но (load) никогда не вызывается в Angular Universal mode.

Я попробовал другую реализацию onload, прямо внутри компонента, таким образом: 

  ngAfterViewChecked() {
    this.renderer.listen(this.img.nativeElement, 'load', () => {
      this.calculateImageSize();
    })
  }

Угловой универсал тоже его не поддерживает ...

Есть ли у вас какие-либо идеи альтернативы прослушивателю onload, который работал бы для Angular Universal.

Есть несколько способов решить эту проблему: - Чтобы сделать вызов изображения в сервисе, преобразуйте его в base64 и передайте изображение в качестве источника. - Создайте элемент изображения и вставьте его на страницу.

Я бы предпочел альтернативу слушателю события onload, поэтому, если у кого-то есть идея, не стесняйтесь! Или построить изображение и

1 Ответ

0 голосов
/ 09 мая 2018

AFAIK в текущем состоянии универсального модуля получить ширину и высоту элемента невозможно. Это связано с тем, что никакого реального рендеринга пользовательского интерфейса не происходит, поэтому значения naturalWidth, naturalHeight не заполняются.

Я бы предложил вам указать, по крайней мере, ориентировочную ширину / высоту для изображений для рендеринга на стороне сервера. Вы можете использовать isPlatformBrowser, чтобы отойти от другой логики для браузера и сервера.

...