如何实现 在角7？

Question

我是新来的角的世界里，我试图找到答案，我的问题在一切可能的方式，但未能如愿。

在下面的代码，我运行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> andbar.data`部分满足您的需求。

我建议你阅读整篇文章，以更好地了解如何工作的。

Answer 2

您可以以另一种方式实现这一目标。采用NG-如果到组件的名称与数组项匹配

<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>