Как добитьсяв угловых 7?

Question

Я новичок в мире Angular, я пытался найти ответ на свой вопрос всеми возможными способами, но не смог этого сделать.

В приведенном ниже коде я запускаю тег div в цикле for, где мне нужно вставить модуль ngx (так как я не уверен в точных соглашениях об именах), но имя модуля должно основываться на каком-то пользователевход.Допустим, у меня есть все имена модулей (разных страниц), хранящиеся в строковом массиве.Мне нужно перебрать все выбранные элементы массива и добавить эти предопределенные шаблоны модулей.

Любые предложения или ответы приветствуются.

https://www.npmjs.com/package/ngx-select-ex Я пытался с этим примером, но я не уверен, что я на правильном пути.

<div class="row" *ngFor = "let selectedMenuItems of selectedMenuItems let i = index">
  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
     <ngx-selectedMenuItems ></ngx-selectedMenuItems>
  </div>
</div>

Answer 1

Посмотрите, как динамически загружать компоненты здесь https://angular.io/guide/dynamic-component-loader.

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

// The template where we will dynamically load components
<ng-template host></ng-template>

// Here you should run some check against the user input to decide which component to load
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(foo.component);

// Get the ng-template
let viewContainerRef = this.host.viewContainerRef;
viewContainerRef.clear();

// Set some data in the component you loaded
let componentRef = viewContainerRef.createComponent(componentFactory);
(<FooComponent>componentRef.instance).data = bar.data;

Убедитесь, чтоизмените части foo.component / <FooComponent> and bar.data` в этом примере для своих нужд.

Я рекомендую прочитать всю статью, чтобы лучше понять, как это работает.

Answer 2

Вы можете достичь этого по-другому.Используйте ng-if, чтобы сопоставить имя компонента с элементом массива

<div class="row" *ngFor="let itemName of selectedMenuItems">
  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
     <ngx-Squirtle *ngIf="itemName=='Squirtle'"></ngx-Squirtle>
     <ngx-pikachu *ngIf="itemName=='pikachu'"></ngx-pikachu>
     <ngx-Bulbasaur *ngIf="itemName=='Bulbasaur'"></ngx-Bulbasaur>
  </div>
</div>