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

Question

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

在下面的代码中，我在 for 循环中的运行 div 标记中需要插入一个 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

您可以通过其他方式实现。使用 ng-if 将组件名称与数组 item

匹配

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

Answer 2

在此处查看如何动态加载组件 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` 部分。

我建议阅读整篇文章以更好地理解其工作原理。

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

How to achieve <ngx-customname></ngx-customname> in Angular 7?

angular

angularjs-directive

angular-ui-router