Angular 5中*ngFor组件的替代方案：是否有更优实现方式？

当然有更优雅易维护的方案！你当前的写法虽然能实现需求，但随着组件类型增多，模板会变得冗长不堪，维护起来也麻烦。下面分享两种主流的优化思路，你可以根据场景选择：

Angular 自带的ngComponentOutlet指令可以直接根据组件类动态渲染组件，完美替代一堆*ngIf的写法。

步骤： #

1. 在父组件中创建类型-组件映射表，把你的component.type和对应的组件类关联起来：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Component1, Component2, Component3 } from './your-components-path';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 你的原有组件数据流
  components$: Observable<any[]>;

  // 类型到组件的映射
  private componentTypeMap = {
    'some-type-1': Component1,
    'some-type-2': Component2,
    'some-type-3': Component3
  };

  // 对外暴露映射方法（也可以直接在模板里用映射表）
  getComponentClass(type: string) {
    return this.componentTypeMap[type];
  }
}

2. 简化模板，用ngComponentOutlet替代多个*ngIf：

<div *ngFor="let component of components | async">
  <ng-container 
    *ngComponentOutlet="getComponentClass(component.type)"
  ></ng-container>
</div>

优点： #

• 模板极度简洁，告别重复的*ngIf判断
• Angular 自动处理组件的创建、销毁生命周期
• 代码可读性和维护性大幅提升

如果你的场景需要自定义组件初始化逻辑（比如传递复杂数据、监听子组件事件），ComponentFactoryResolver会是更灵活的选择，它允许你完全控制动态组件的生命周期。

步骤： #

1. 在父组件中注入ComponentFactoryResolver，并准备视图容器：

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Observable } from 'rxjs';
import { Component1, Component2, Component3 } from './your-components-path';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  components$: Observable<any[]>;
  private components: any[] = [];

  // 获取视图容器，用来承载动态组件
  @ViewChild('componentContainer', { read: ViewContainerRef, static: false }) 
  private componentContainer: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    // 订阅组件数据流，更新时重新渲染
    this.components$.subscribe(newComponents => {
      this.components = newComponents;
      this.renderDynamicComponents();
    });
  }

  private renderDynamicComponents() {
    // 先清空容器里的旧组件
    this.componentContainer.clear();

    this.components.forEach(item => {
      // 根据类型获取组件工厂
      const componentFactory = this.resolver.resolveComponentFactory(
        this.getComponentClass(item.type)
      );
      // 创建组件实例
      const componentRef = this.componentContainer.createComponent(componentFactory);
      
      // 给子组件传递数据（如果子组件有对应的输入属性）
      componentRef.instance.data = item.data;
      
      // 监听子组件输出事件（如果需要）
      componentRef.instance.someOutput.subscribe(event => {
        // 处理子组件事件
        console.log('子组件事件触发:', event);
      });
    });
  }

  private getComponentClass(type: string) {
    const map = {
      'some-type-1': Component1,
      'some-type-2': Component2,
      'some-type-3': Component3
    };
    return map[type];
  }
}

2. 模板中只需要一个承载动态组件的容器：

<div>
  <ng-template #componentContainer></ng-template>
</div>

优点： #

• 完全掌控组件的创建、初始化、销毁流程
• 支持复杂的数据传递和事件交互
• 适合需要高度自定义的业务场景

注意事项： #

• Angular 9+ 启用 Ivy 编译器后，无需再将动态组件添加到模块的entryComponents数组中；如果是 Angular 8 及以下版本，必须把这些子组件加入entryComponents才能正常渲染。

内容的提问来源于stack exchange，提问作者Retr Wood