Разработка любого проекта на основе веб-приложений с помощью Angular, в частности, требует, чтобы вы предполагали, что ваш пользователь будет просматривать ваш проект Angular не только в обычном веб-браузере на ПК, но также может быть просмотрен на iPad или мобильном устройстве.

В некоторых случаях, чтобы обеспечить оптимальный UI / UX для ваших пользователей, вы можете захотеть скрыть определенные детали, когда пользователь просматривает ваш сайт на мобильном устройстве, а не на ПК.

Хотя Angular изначально был динамичным, проблема здесь в том, что вы можете захотеть настроить определенные впечатления от просмотра, и вопрос в том, как вы можете определить, откуда просматривается сайт?

Можно ли получить размер экрана или размер браузера заранее или динамически, когда веб-приложение загружается, чтобы обеспечить оптимальное взаимодействие с пользовательским интерфейсом / пользовательским интерфейсом для ваших пользователей? Неважно, с какого устройства или экрана они просматривают ваше веб-приложение Angular?

Если у вас тоже есть эта проблема в вашем проекте на основе Angular, ответ - да, это можно доставить, и я собираюсь показать вам, как сделать это динамически с помощью Host Listener.

0. Подготовьте проект Angular. Angular 10+ предпочтительнее

Это быстро выигрышный проект, и его будет легко реализовать, если вы сможете запустить и запустить веб-приложение Angular.

1. Добавление Host Listener в ваш проект через @ angular / core

В первой строке вашей страницы добавьте следующее в сборный импорт @ angular / core в строке 1 (обычно на типичной домашней странице Angular). См. Ниже, я выделил свойство, которое нужно добавить, полужирным

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

2. Настройка Host Listener в вашем классе для прослушивания любых изменений.

Следующим шагом здесь является настройка Host Listener для динамического «прослушивания» любых изменений в отношении «window: resize». Делая это, мы можем проверять размер окна каждый раз, когда браузер меняет размер, и это то, что мы будем использовать, чтобы сообщить нашему веб-приложению, как реагировать. Но сначала настройте Host Listener:

В этом случае я установил, что если ширина больше 760 пикселей, я предполагаю, что зритель использует большой экран. В противном случае я предполагаю, что пользователь использует устройство меньшего размера. Я также установил в начале в ngOnInit() (строки 7–20) начальное значение screenMode

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

3. Добавьте *ngIf в свой HTML-файл.

Наконец, просто используйте *ngIf, чтобы различать, какой экран используется для просмотра этого веб-приложения Angular, например:

Вы можете использовать условие *ngIf в любом месте своей HTML-страницы, чтобы отображать разные элементы на экранах разных размеров.

Заключение

Я уверен, что есть гораздо более изящный способ адаптироваться к разным размерам экрана, но это способ, который я использовал для проверки того, какой экран используется для обеспечения оптимального UI / UX для моих пользователей и зрителей. Итак, резюмируем:

  1. Импортировать прослушиватель хоста
  2. Добавьте Host Listener в свой файл .ts. Это определит размер экрана.
  3. Используйте * ngIf, чтобы показать / скрыть определенные элементы для разных размеров экрана

Селамат Мегатуркара

Больше контента на plainenglish.io