Angular8如何为单个组件实现条件加载两套HTML模板？

你所设想的在@Component装饰器的templateUrl字段中直接写条件判断的方案不可行，Angular 的组件元数据是编译阶段就静态解析处理的，不会在运行时根据组件内部的状态动态调整。

以下是3种可落地的实现方案：

直接把两套模板的内容合并到同一个HTML文件中，用状态变量配合*ngIf控制显示隐藏：

1. 组件类中定义状态变量和切换方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})
export class FormComponent {
  useDefaultTemplate = true;

  // 按钮1点击触发
  loadDefaultTemplate() {
    this.useDefaultTemplate = true;
  }

  // 按钮2点击触发
  loadNewTemplate() {
    this.useDefaultTemplate = false;
  }
}

2. 模板文件form.component.html中写入两套内容：

<!-- 原有form模板内容 -->
<div *ngIf="useDefaultTemplate">
  <!-- 这里放原form.component.html的所有内容 -->
</div>

<!-- 新form1模板内容 -->
<div *ngIf="!useDefaultTemplate">
  <!-- 这里放form1.component.html的所有内容 -->
</div>

如果必须保留两个独立的.html文件，可通过HTTP加载模板内容，动态渲染到视图容器中：

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

@Component({
  selector: 'app-form',
  template: `<ng-container #templateContainer></ng-container>`,
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})
export class FormComponent {
  @ViewChild('templateContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private http: HttpClient) {}

  // 按钮1点击触发
  async loadDefaultTemplate() {
    await this.renderTemplate('./form.component.html');
  }

  // 按钮2点击触发
  async loadNewTemplate() {
    await this.renderTemplate('./form1.component.html');
  }

  private async renderTemplate(path: string) {
    this.container.clear();
    // 加载HTML文件内容
    const content = await this.http.get(path, { responseType: 'text' }).toPromise();
    const template = document.createElement('template');
    template.innerHTML = content;
    // 动态渲染模板
    const view = this.container.createEmbeddedView(template.content);
    view.detectChanges();
  }
}

把两套模板分别封装为独立的小组件，共享逻辑抽到公共服务/父类，在父组件中根据条件动态加载对应组件，可维护性更高：

1. 先创建两个独立子组件：DefaultFormComponent对应原有模板，NewFormComponent对应新模板
2. 父组件app-form代码：

import { Component } from '@angular/core';
import { DefaultFormComponent } from './default-form/default-form.component';
import { NewFormComponent } from './new-form/new-form.component';

@Component({
  selector: 'app-form',
  template: `<ng-container *ngComponentOutlet="activeComponent"></ng-container>`,
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})
export class FormComponent {
  activeComponent = DefaultFormComponent;

  loadDefaultTemplate() {
    this.activeComponent = DefaultFormComponent;
  }

  loadNewTemplate() {
    this.activeComponent = NewFormComponent;
  }
}

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