Question

我是Angular世界的新手，我试图以各种可能的方式找到问题的答案，但未能做到。

在下面的代码中，我在for循环中运行div标记，需要在其中插入ngx-module（因为我不确定确切的命名约定），但是模块名称应基于某些用户输入。假设我将所有模块（不同的页面）名称存储在字符串数组中。我需要遍历所有选定的数组项，并添加那些预定义的模块模板。

任何建议或答案都是合理的。

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>

如何在Angular 7中实现<ngx-customname> </ngx-customname>？

2 个答案: