如何在Angular中动态引用模板？寻求更优雅的实现方案

最简优化方案（适配模板名称与section.type完全匹配的场景） #

原代码的冗余点在于每个section.type都对应同名模板，重复的ngSwitchCase完全可以省略。我们可以通过在组件类中建立类型-模板映射来大幅简化代码：

组件类代码：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  // 声明对应模板的引用
  @ViewChild('text') textTemplate!: TemplateRef<any>;
  @ViewChild('title') titleTemplate!: TemplateRef<any>;
  @ViewChild('links') linksTemplate!: TemplateRef<any>;
  @ViewChild('selects') selectsTemplate!: TemplateRef<any>;
  @ViewChild('images') imagesTemplate!: TemplateRef<any>;

  // 建立类型到模板的映射关系
  templateMap = {
    text: this.textTemplate,
    title: this.titleTemplate,
    links: this.linksTemplate,
    selects: this.selectsTemplate,
    images: this.imagesTemplate
  };

  // 你的column数据
  column = { /* ... */ };
}

模板代码：

<ng-container *ngFor="let section of column.sections">
  <!-- 直接通过映射动态匹配并渲染模板 -->
  <ng-container *ngTemplateOutlet="templateMap[section.type]"></ng-container>
</ng-container>

更具扩展性的方案（支持动态新增模板类型） #

如果后续需要频繁新增section.type，每次修改组件类的映射会很繁琐。可以通过自定义指令自动收集模板，实现无侵入式扩展：

1. 创建自定义指令

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

@Directive({
  selector: '[sectionTemplate]'
})
export class SectionTemplateDirective {
  @Input() sectionType!: string;
  constructor(public templateRef: TemplateRef<any>) {}
}

2. 组件类中自动收集模板映射

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { SectionTemplateDirective } from './section-template.directive';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren(SectionTemplateDirective) sectionTemplates!: QueryList<SectionTemplateDirective>;
  templateMap = new Map<string, TemplateRef<any>>();

  ngAfterViewInit() {
    // 自动收集所有标记的模板，建立类型映射
    this.sectionTemplates.forEach(dir => {
      this.templateMap.set(dir.sectionType, dir.templateRef);
    });
  }

  column = { /* ... */ };
}

3. 模板中用指令标记对应模板

<!-- 用自定义指令标记每个模板，并指定对应的section类型 -->
<ng-template sectionTemplate sectionType="text">
  <!-- text模板的具体内容 -->
</ng-template>

<ng-template sectionTemplate sectionType="title">
  <!-- title模板的具体内容 -->
</ng-template>

<!-- 其他类型模板同理 -->

<!-- 渲染逻辑 -->
<ng-container *ngFor="let section of column.sections">
  <ng-container *ngTemplateOutlet="templateMap.get(section.type)"></ng-container>
</ng-container>

方案优势 #

• 彻底移除了冗余的ngSwitch嵌套代码，模板结构更清晰
• 最简方案适合固定类型场景，代码量最少、成本最低
• 扩展方案支持动态新增类型，只需添加模板和指令，无需修改组件核心逻辑

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