Angular 5中如何动态读取外部模板？

嘿，我懂你遇到的麻烦了！在Angular里直接给templateUrl塞动态路径肯定会编译失败，这是因为Angular的编译机制决定的——不管是开发环境的JIT还是生产环境的AOT，都会在构建阶段就把所有引用的模板文件打包进应用，动态路径在编译时根本没法确定，编译器找不到对应的文件，自然就报错了。

下面给你几个可行的解决方案，你可以根据自己的模板复杂度来选：

方案一：用HttpClient加载静态模板（适合无Angular逻辑的纯HTML） #

如果你的模板只是简单的静态HTML，没有*ngIf、组件引用这类Angular特性，这种方式最直接：

1. 先在组件里注入HttpClient和DomSanitizer（用来处理安全校验）
2. 从API拿到文件夹名称后，拼接模板路径，用HttpClient加载模板内容
3. 把加载到的内容处理后，通过innerHTML渲染到页面上

示例代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  template: `<div [innerHTML]="dynamicTemplate"></div>`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  dynamicTemplate: SafeHtml;

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    // 这里替换成你从API获取文件夹名称的逻辑
    const folderName = 'customFolder';
    const templateUrl = `../tpl/${folderName}/home.html`;

    this.http.get(templateUrl, { responseType: 'text' })
      .subscribe(templateContent => {
        // 必须用DomSanitizer处理，否则Angular会拦截不安全的HTML
        this.dynamicTemplate = this.sanitizer.bypassSecurityTrustHtml(templateContent);
      });
  }
}

⚠️ 注意：这种方式没法解析Angular指令和数据绑定，因为innerHTML只是把纯HTML插入DOM，不会经过Angular的编译流程。

方案二：动态加载组件（适合带Angular逻辑的模板） #

如果你的模板里有Angular指令、组件或者数据绑定，那得用动态组件加载的方式，核心思路是为每个模板创建独立的组件，然后根据API返回值动态渲染对应的组件：

第一步：创建对应模板的组件 #

比如针对default和custom两个文件夹，分别创建组件：

// home-default.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home-default',
  templateUrl: '../tpl/default/home.html',
  styleUrls: ['./home.component.css']
})
export class HomeDefaultComponent { }

// home-custom.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home-custom',
  templateUrl: '../tpl/custom/home.html',
  styleUrls: ['./home.component.css']
})
export class HomeCustomComponent { }

第二步：在主组件里动态渲染 #

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { HomeDefaultComponent } from './home-default.component';
import { HomeCustomComponent } from './home-custom.component';

@Component({
  selector: 'app-home',
  template: `<div #templateContainer></div>`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // 获取用来渲染动态组件的容器
  @ViewChild('templateContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    // 替换成你从API获取的文件夹名称
    const folderName = 'custom';
    let targetComponent;

    // 根据文件夹名称选择对应的组件
    switch(folderName) {
      case 'default':
        targetComponent = HomeDefaultComponent;
        break;
      case 'custom':
        targetComponent = HomeCustomComponent;
        break;
      // 可以添加更多模板对应的case
      default:
        targetComponent = HomeDefaultComponent;
    }

    // 创建组件工厂并渲染组件
    const componentFactory = this.resolver.resolveComponentFactory(targetComponent);
    this.container.createComponent(componentFactory);
  }
}

这种方式完全支持Angular的所有特性，因为每个模板都是一个被正常编译的组件。

方案三：ng-template条件渲染（适合模板数量少的场景） #

如果你的可选模板数量不多，也可以把所有模板都写在ng-template里，然后根据API返回值选择渲染哪个：

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

@Component({
  selector: 'app-home',
  template: `
    <!-- 把不同文件夹的模板内容直接写在这里 -->
    <ng-template #defaultTpl>
      <!-- 这里复制../tpl/default/home.html的内容 -->
    </ng-template>
    <ng-template #customTpl>
      <!-- 这里复制../tpl/custom/home.html的内容 -->
    </ng-template>

    <!-- 根据选择渲染对应的模板 -->
    <ng-container *ngTemplateOutlet="selectedTemplate"></ng-container>
  `,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  selectedTemplate: TemplateRef<any>;

  @ViewChild('defaultTpl') defaultTpl: TemplateRef<any>;
  @ViewChild('customTpl') customTpl: TemplateRef<any>;

  ngOnInit() {
    const folderName = 'custom'; // 替换为API结果
    this.selectedTemplate = folderName === 'default' ? this.defaultTpl : this.customTpl;
  }
}

这种方式简单直接，但如果模板太多，组件代码会变得臃肿，适合模板数量较少的场景。

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