Загрузка динамических компонентов на основе пользовательского ввода в угловых 5+

Question

У меня есть приложение, в котором пользователь принимает решение на одной странице (я использую cdk stepper), когда они переходят на следующую страницу, я хочу динамически загружать различные компоненты в зависимости от того, что выбрал пользователь.

Думайте о вариантах как о различных компонентах формы, и на следующей странице будет отображаться один из многих из них на основе этих вариантов.Я не хочу просто использовать ngIf в html, потому что потенциально может быть более 100 таких форм, поэтому я хочу, чтобы каждый выбор, который делает пользователь, имел связанную с ним переменную (метаданные), которую можно использовать для динамической загрузки любого числакомпонентов на следующем экране.

Я посмотрел на CDK Portal для этого, но мне интересно, есть ли лучшее решение.Если нет, я не уверен на 100% в том, как CDK Portal будет работать для этого, я думаю, что каждая форма должна расширять какой-то базовый компонент.Я считаю, что машинопись будет настроена для загрузки компонентов в хост портала.Дайте мне знать, если у кого-то есть предложения или вопросы по этому вопросу.

Answer 1

По сути, вам все еще нужно поместить логику if / else в другое место, чтобы она работала.Мой первый подход к этой проблеме - создать таблицу компонентов выбора с двумя столбцами, именем компонента и логическим значением, чтобы знать, что он выбран:

[(A, false), (B, false)]

Вам все еще нужно поместить все компоненты для следующего шага вHTML-файл, например:

<a *ngIf="isComponentSelection(a)"></a>
<b *ngIf="isComponentSelection(b)"></b>

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

ВПервая доска, вам просто нужно привязать к таблице список флажков с именами компонентов, которые у вас есть.