Angular - динамически создавать компонент из службы

Question

У меня есть приложение angular, и я хочу создать сервис, похожий на тостер, где я могу показывать различные виды предопределенных модальных окон (подтверждение, свяжитесь с нами и т. Д. c ..) из разных мест в моем приложении. Например: у меня есть ConfirmBackButtonBehaviorGuard, который привязан к поведению маршрута canDeactivate. Из этого охранника я хочу открыть модальное окно с помощью службы типа:

const promise = modalsService.openConfirmDialog('Are you sure', 'Leaving this page without saving....', 'Yes Take Me Out', 'Stay Here' );
var result = await promise();
...

Проблема в том, что мне нужно получить доступ к некоторому viewContainerRef, чтобы динамически создавать модальное окно. Я думал о добавлении контейнера в app.component, но не знаю, как получить к нему доступ (если это вообще возможно) из службы.

Answer 1

Я бы использовал класс CompnentFactoryResolver для достижения аналогичного поведения. Метод класса resolveComponentFactory динамически разрешает компонент, который вы передаете в качестве параметра. Он также позволяет передавать данные в компонент Dynami c, используя токены внедрения, прослушивать (подписываться) на действие close и извлекать результаты из диалога.

Вот пример того, как может выглядеть api после реализации:

@Component({
  selector: 'app-host-modal',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppHostModal {
  constructor(public modalService: ModalService) {}

  onConfirmCancel(): void {
    this.modalService.open(FancyPopupComponent, {
      data: { message: 'Are you sure?' },
    });
  }

}

В этой статье подробно описано, как это реализовать.

Помимо пользовательской реализации, вы можете использовать наложения CDK .

Другой и самый простой вариант - использовать диалоговое окно материалов .