Как решить проблему большого количества компонентов на странице в Angular?
Добрый день. При написании приложения на angular в определённый момент появилась проблема наличия слишком большого количества компонентов, которые не используются все сразу, но при этом загружаются и находятся на странице. В основном это модальные окна для редактирования карточки свойств определённых сущностный или окна выбора некой сущности из списка. При этом имеется определённый уровень вложенности, то есть в компоненте карточки редактирования свойств есть компоненты выбора значений для этих свойств и таких компонентов выбора может быть несколько. В итоге всё это приводит к тому, что на странице находится большое количество компонентов, которые не обязательно используются, но в любом случае загружаются, инициализируются и потребляют ресурсы, где-то это уже начало приводить к циклическим зависимостям. Всё это выглядит довольно криво и неправильно. Пока у меня есть следующие идеи:
1 Загружать компоненты динамически, то есть открыли окно — компонент загрузился, закрыли — он выгрузился.
2 Убрать вложенность — поместить все компоненты окон на уровень роута, привязать к каждому из них сервис и вызывать при необходимости, при этом динамически загружая или выгружая.
Собственно, вопрос: в правильном ли направлении я ищу решение, если да, то как это лучше реализовать? Если нет, то, возможно, существуют более традиционные способы решения проблемы?
На счёт второго пункта, я забыл написать, что один компонент может находится в нескольких других и поэтому может дублироваться на странице несколько раз, что не очень желательно, именно эту проблему я хотел решить таким образом.
2 делать не нужно)))))))) Я думаю это лишнее.
Насчет первого не понял. Это как?)
В Angular 2+ есть хорошая вещь под названием lazy Module. Если вы хотите разгрузить проект натыканными модалками, лучше поделите контент на большие страницы на модули, а модалки в них уже не будут так ощутимы как вам кажется https://angular.io/guide/lazy-loading-ngmodules
Спасибо за ответ. На счёт первого, например, использовать ngIf, с ложным значением компонент вообще отсутствует на странице и не доставляет проблем. Но сложность в том, что нужно как-то отслеживать загрузку компонента, иначе если обращаться к нему сразу после "включения", то обращение происходит к несуществующим свойствам. Ещё нагуглил NgxComponentOutlet (https://medium.com/@thekiba/dynamic-component-rend... где обещают динамическую загрузку компонента и при этом обычный доступ к нему. Про lazy Module тоже читал, но пока что решение кажется слишком сложным, так как хочется сделать точечную загрузку компонентов.
Dmitry-H87, Может я не правильно говорю, но ngif никак не улучшит вашу ситуацию.... Может быть если б вы подемонстрировали, то было бы яснее. Я не понимаю каким образом модалка могла вам усложнить жизнь и почему нужно именно ее полностью внедрять в разметку динамически. Опять же lazy Module хорошее и простое решение. Старайтесь не нагружать свой проект стороними модулями. Потому что, вы получите ровно те же тормоза с которых начали
Ну, я добавил комментарий к изначальному вопросу, проблема ещё в том, что на странице может быть несколько компонентов, которые на разной степени вложенности используют одну и ту же модалку, из-за чего последняя многократно дублируется. Я поставил console.log() в ngInit одной такой модалки и получил вывод 15 раз при загрузке страницы, что не очень здорово. ngIf решает проблему (console.log() не выводится, страница грузится быстрее) в том случае, когда я изначально знаю, что компонент находится в режиме просмотра, и модалки вызываться не будут. Собственно, поэтому и хотелось бы загружать их только по требованию, а не все сразу.
