Добавление поддержки полноэкранного режима в Ng-Zorro

Ant design + Angular = ng-zorro

В эти дни я работаю над проектом и выбрал ng-zorro в качестве библиотеки компонентов для этой задачи.

Недавно я добавил полноэкранный режим в свое приложение через requestFullscreen API и заметил, что модалы, меню выбора и т.д. отсутствуют в полноэкранном режиме.

Почему это происходит?

При переходе в полноэкранный режим с помощью requestFullscreen браузер покажет только элемент, на котором был вызван метод, и всех его потомков.

Когда мы открываем новый модал или меню выбора, они добавляются в тело документа, и поэтому отсутствуют в полноэкранном режиме.

Они появляются, только если мы входим в полноэкранный режим на всем элементе body.

Существует несколько подходов к модалам, поддерживающим полноэкранный режим:

Изменение OverlyContainer

В итоге я решил проблему в своем проекте с помощью этого решения. ng-zorro использует @angular/cdk за кулисами, который раскрывает нечто под названием FullscreenOverlayContainer.

Простая замена стандартного OverlyContainer на FullscreenOverlyContainer будет обрабатывать полноэкранный режим для вас:

{ provide: OverlayContainer, useClass: FullscreenOverlayContainer,}

Вы не можете запустить полноэкранный режим при просмотре редактора Stackblitz, поэтому попробуйте рабочий пример , а код смотрите здесь .

CSS Fullscreen

Это решение больше похоже на обходной путь к решению проблемы, но оно работает.

Я действительно столкнулся с этим в этом ng-zorro вопросе. В основном решение заключается в том, чтобы ввести полноэкранный режим для элемента body, чтобы модалы и всплывающие окна были включены, и использовать css для приведения содержимого, которое вы действительно хотите, чтобы покрыть весь экран.

Смотрите этот рабочий пример из выпуска.

Добавление к полноэкранному элементу

Это решение не поддерживается ng-zorro, но вы можете найти его полезным в будущем.

Некоторые библиотеки поддерживают определение места прикрепления таких модалов, например @ngneat/dialog и мы можем просто прикрепить наше содержимое к элементу fullscreen, передав параметр container:

import { inject } from '@angular/core';
import { DialogService } from '@ngneat/dialog';

inject(DialogService).open(MyDialogComponent, {
  container: document.fullscreenElement || document.body
});

Таким образом, модал находится под полноэкранным элементом и включен в представление.