Angular 4中基于TypeScript实现动态TemplateUrl路径方案咨询

嘿，我之前也碰到过这个问题！Angular 4 不像 AngularJS 那样能直接在 @Component 的 templateUrl 里用动态函数，不过有几个实用的方案能帮你实现动态加载模板的需求，我给你拆解一下：

方案一：动态编译组件（支持任意动态模板URL） #

因为 Angular 的组件元数据在编译阶段就会被解析，templateUrl 无法在运行时动态修改，所以我们可以通过运行时加载模板内容+动态编译组件的方式实现需求，适合需要加载任意外部模板文件的场景。

步骤1：创建模板加载服务 #

先写一个服务用来通过 HTTP 获取模板文件的内容：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TemplateLoaderService {
  constructor(private http: HttpClient) {}

  // 根据传入的URL加载模板文本
  loadTemplate(url: string): Observable<string> {
    return this.http.get(url, { responseType: 'text' });
  }
}

步骤2：编写容器组件动态渲染 #

创建一个容器组件，负责加载模板、编译组件并挂载到页面：

import { Component, ViewChild, ViewContainerRef, Compiler, Injector, NgModule, ModuleWithComponentFactories } from '@angular/core';
import { TemplateLoaderService } from './template-loader.service';

@Component({
  selector: 'app-template-container',
  template: `<div #templateContainer></div>`
})
export class TemplateContainerComponent {
  // 获取用来挂载动态组件的容器
  @ViewChild('templateContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    private templateLoader: TemplateLoaderService,
    private compiler: Compiler,
    private injector: Injector
  ) {}

  // 传入动态模板URL，加载并渲染
  loadDynamicTemplate(templateUrl: string) {
    // 清空容器，避免重复渲染
    this.container.clear();

    this.templateLoader.loadTemplate(templateUrl).subscribe(templateContent => {
      // 1. 动态创建组件元数据，把加载到的模板内容赋值给template属性
      const DynamicComponent = Component({ template: templateContent })(class {});
      // 2. 动态创建模块元数据，声明这个动态组件
      const DynamicModule = NgModule({ declarations: [DynamicComponent] })(class {});

      // 3. 编译模块和组件
      this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
        .then((moduleFactory: ModuleWithComponentFactories<any>) => {
          // 获取动态组件的工厂
          const componentFactory = moduleFactory.componentFactories.find(f => f.componentType === DynamicComponent);
          // 4. 创建组件实例并挂载到容器中
          const componentRef = this.container.createComponent(componentFactory, 0, this.injector);
          
          // 如果需要给动态组件传值，可以在这里操作
          // componentRef.instance.yourProperty = someValue;
        });
    });
  }
}

注意事项 #

• 这种方式不支持 AoT 编译，因为 AoT 会提前编译所有组件，动态生成的组件不在预编译列表中；
• 如果需要支持 AoT，建议使用下面的方案二。

方案二：使用 ngTemplateOutlet（适合有限模板列表场景） #

如果你的动态模板是提前已知的有限几个，推荐用这个方案——提前把所有模板定义在 ng-template 中，然后根据条件动态切换渲染，完全支持 AoT 编译。

组件模板代码 #

<!-- 用来渲染选中模板的容器 -->
<ng-container [ngTemplateOutlet]="selectedTemplate"></ng-container>

<!-- 预定义模板1 -->
<ng-template #userTemplate>
  <app-user-component></app-user-component>
</ng-template>

<!-- 预定义模板2 -->
<ng-template #adminTemplate>
  <app-admin-component></app-admin-component>
</ng-template>

组件类代码 #

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

@Component({
  selector: 'app-dynamic-switcher',
  templateUrl: './dynamic-switcher.component.html'
})
export class DynamicSwitcherComponent {
  // 获取预定义的模板引用
  @ViewChild('userTemplate') userTemplate: TemplateRef<any>;
  @ViewChild('adminTemplate') adminTemplate: TemplateRef<any>;
  
  // 当前选中的模板
  selectedTemplate: TemplateRef<any>;

  // 根据条件切换模板
  switchTemplate(role: string) {
    this.selectedTemplate = role === 'user' ? this.userTemplate : this.adminTemplate;
  }
}

方案三：自定义指令加载静态模板（适合纯HTML内容） #

如果你的动态模板是纯静态 HTML（不含 Angular 指令、组件或数据绑定），可以写一个简单的自定义指令来加载模板：

自定义指令代码 #

import { Directive, Input, OnInit, ElementRef, HttpClient } from '@angular/core';

@Directive({
  selector: '[appStaticDynamicTemplate]'
})
export class StaticDynamicTemplateDirective implements OnInit {
  // 接收动态模板URL
  @Input('appStaticDynamicTemplate') templateUrl: string;

  constructor(private el: ElementRef, private http: HttpClient) {}

  ngOnInit() {
    // 加载模板内容并插入到DOM中
    this.http.get(this.templateUrl, { responseType: 'text' }).subscribe(template => {
      this.el.nativeElement.innerHTML = template;
    });
  }
}

使用方式 #

<!-- 传入动态模板URL即可 -->
<div [appStaticDynamicTemplate]="dynamicTemplateUrl"></div>

注意事项 #

• 这种方式加载的模板里如果有 Angular 相关的内容（比如 *ngIf、组件标签），不会被 Angular 编译，所以仅适用于纯静态 HTML。

内容的提问来源于stack exchange，提问作者Rajendra Prasad Kavuturu