Angular为何移除ng-include？模态框动态模板的实现方案

为什么 Angular 没有内置类似 ng-include 的功能？ #

Angular 是组件化优先的框架，核心思想是通过组件封装 UI 和逻辑，而 ng-include 这种直接引用模板片段的方式会打破组件的封装性，导致逻辑分散、样式污染，不符合 Angular 的架构设计理念。官方更推荐通过组件复用实现动态 UI 需求。

标准实现方案 #

针对大量模态框模板变体的场景，推荐以下两种官方认可的实现方式：

方案一：使用 ngComponentOutlet 动态渲染组件（Angular 9+ 推荐）

这是最简洁的动态组件渲染方式，直接在模板中绑定组件类即可实现动态加载。

1. 定义模态框通用组件

<!-- modal.component.html -->
<div class="modal-container">
  <!-- 动态渲染头部组件 -->
  <ng-container *ngComponentOutlet="headerComponent; inputs: { config: modalConfig }"></ng-container>
  
  <!-- 动态渲染主体组件 -->
  <ng-container *ngComponentOutlet="bodyComponent; inputs: { config: modalConfig, data: modalData }"></ng-container>
  
  <!-- 动态渲染底部组件 -->
  <ng-container *ngComponentOutlet="footerComponent; inputs: { config: modalConfig }"></ng-container>
</div>

// modal.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent {
  @Input() headerComponent: any;
  @Input() bodyComponent: any;
  @Input() footerComponent: any;
  @Input() modalConfig: any;
  @Input() modalData: any;
}

2. 定义模态框变体组件
   比如创建一个自定义主体组件：

// custom-modal-body.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-modal-body',
  templateUrl: './custom-modal-body.component.html'
})
export class CustomModalBodyComponent {
  @Input() config: any;
  @Input() data: any;
}

3. 调用模态框
   在业务组件中通过服务或直接实例化模态框，传入对应的组件：

// 业务组件中调用
import { CustomModalHeaderComponent } from './custom-modal-header.component';
import { CustomModalBodyComponent } from './custom-modal-body.component';
import { CustomModalFooterComponent } from './custom-modal-footer.component';

// 打开模态框时传入组件
this.modalService.open({
  headerComponent: CustomModalHeaderComponent,
  bodyComponent: CustomModalBodyComponent,
  footerComponent: CustomModalFooterComponent,
  config: { /* 配置参数 */ },
  data: { /* 业务数据 */ }
});

方案二：使用 ComponentFactoryResolver 动态加载组件（兼容旧版本）

如果需要兼容 Angular 9 以下版本，或者需要更精细的组件实例控制，可以用这种方式。

1. 通用模态框组件预留容器

<!-- modal.component.html -->
<div class="modal-container">
  <div #headerContainer></div>
  <div #bodyContainer></div>
  <div #footerContainer></div>
</div>

// modal.component.ts
import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent {
  @Input() set headerComponent(comp: any) {
    this.loadComponent(comp, this.headerContainer);
  }
  @Input() set bodyComponent(comp: any) {
    this.loadComponent(comp, this.bodyContainer);
  }
  @Input() set footerComponent(comp: any) {
    this.loadComponent(comp, this.footerContainer);
  }
  @Input() modalConfig: any;
  @Input() modalData: any;

  @ViewChild('headerContainer', { read: ViewContainerRef }) headerContainer!: ViewContainerRef;
  @ViewChild('bodyContainer', { read: ViewContainerRef }) bodyContainer!: ViewContainerRef;
  @ViewChild('footerContainer', { read: ViewContainerRef }) footerContainer!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  private loadComponent(component: any, container: ViewContainerRef) {
    container.clear();
    const factory = this.resolver.resolveComponentFactory(component);
    const componentRef = container.createComponent(factory);
    // 传递输入参数
    componentRef.instance.config = this.modalConfig;
    componentRef.instance.data = this.modalData;
  }
}

2. 调用方式与方案一一致
   同样在业务组件中传入对应的组件类即可动态渲染。

针对原有模板路径的迁移建议 #

如果你的项目中保留了大量独立的模板文件（而非组件），可以将每个模板文件封装成独立的组件（仅包含模板和必要样式），再通过上述方式动态加载。这种方式既符合 Angular 组件化规范，又能最小化迁移成本。

不建议直接加载模板字符串（如通过 HttpClient 获取模板再编译），因为这种方式需要启用 JIT 编译，会增加生产包体积，且不符合 Angular 最佳实践。

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