【问题标题】：Upgrading From AngularJS to Angular 8 having problem with migrating from ng-include used inside ng-repeat从 AngularJS 升级到 Angular 8 在从 ng-repeat 中使用的 ng-include 迁移时遇到问题
【发布时间】：2019-08-02 13:24:38
【问题描述】：

目前我正在将我的应用程序从 Angular JS 升级到 Angular 8。我想使用 ngFor 动态呈现多个组件。

我有多个 UI 组件，它们本质上是相似的。我想遍历并显示组件。在 Angular JS 中，我可以做到这使用 ng-repeat 和 ng-include 基于从数据传递的模板 url。这适用于 AngularJS

但在 Angular 中，我们没有 ng-include。所以我尝试使用开关盒，但将来可以添加新组件。所以我想根据数据使其动态化。

Angular JS

<li ng-repeat="component in ui.componentArray">
    <div ng-include="templateUrl" dynamicController="config.controller"></div>
</li>

组件数组包含可变数量的 html 组件，如 Component1、Component2、Component3 等，以及 ComponentController1、ComponentController3、ComponentController3 等控制器。

Angular 8 我尝试使用 switch case，但它是静态的。我想让它动态化，因为我们可以有更多的组件。

角度 8

<div [ngSwitch]="component.name">
    <app-component1 *ngSwitchCase="'component1'"></app-component1>
    <app-component2 *ngSwitchCase="'component2'"></app-component2>
    <app-component3 *ngSwitchCase="'component3'"></app-component3>
</div>

如何在 Angular 8 中实现上述代码。

【问题讨论】：

为什么不只是 *ngIf 并控制来自 ts 代码的值。

标签： angular

【解决方案1】：

为此，您需要动态加载组件。

Angular 9 及之前的版本

将要动态加载的组件放入入口组件中

 entryComponents: [ App1Component, App2Component ],

角度 10

 entryComponents is not required anymore

主机组件。

import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { HostDirective } from './host.directive';
import { EventEmitter } from '@angular/core';
import { Output } from '@angular/core';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-host',
  template: `<ng-template cmp-host></ng-template>`
})
export class HostComponent implements OnInit, OnDestroy {
  @ViewChild(HostDirective, { static: true }) host: HostDirective;
  @Input() public component: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }

  ngOnDestroy() {
  }

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component);
    const viewContainerRef = this.host.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }
}

获取引用的指令

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[cmp-host]',
})
export class HostDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

这样使用

<app-host [component]='component1'></app-host>
<app-host [component]='component2'></app-host>

您可能会看到一个工作示例here

【讨论】：

【解决方案2】：

看起来这可能就是您要查找的内容：https://coryrylan.com/blog/angular-ng-for-syntax

<!-- Angular -->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>

【讨论】：