Angular 18独立组件如何拆分HTML为多文件并动态加载？

方案1：拆分独立模板组件（推荐，贴合Angular组件化思维） #

把每个拆分出的HTML块做成无业务逻辑的独立组件，主组件仅负责根据条件动态加载这些组件。这种方式完全符合Angular设计理念，每个HTML文件独立维护，可读性拉满，还能给每个模板单独导入所需指令/管道，避免主组件依赖臃肿。

步骤如下：

1. 为每个拆分的HTML创建独立组件，比如one.component.ts：

// one.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-one',
  standalone: true,
  templateUrl: './one.html', // 直接指向拆分出的HTML文件
  imports: [] // 按需添加模板用到的指令、管道或子组件
})
export class OneComponent {}

对应的one.html就是你拆分出来的那部分HTML代码，可独立维护。

2. 主组件通过ViewContainerRef动态加载组件：

// main.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
import { OneComponent } from './one.component';
import { TwoComponent } from './two.component';

@Component({
  selector: 'app-main',
  standalone: true,
  template: `
    <button (click)="loadTemplate('one')">切换到模板1</button>
    <button (click)="loadTemplate('two')">切换到模板2</button>
    <!-- 承载动态组件的容器 -->
    <div #templateContainer></div>
  `
})
export class MainComponent {
  @ViewChild('templateContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  // 记录当前组件，方便销毁清理
  currentComponent?: ComponentRef<any>;

  loadTemplate(type: 'one' | 'two') {
    // 清理之前的组件，避免内存泄漏
    this.currentComponent?.destroy();
    this.container.clear();

    // 根据类型加载对应模板组件
    switch (type) {
      case 'one':
        this.currentComponent = this.container.createComponent(OneComponent);
        break;
      case 'two':
        this.currentComponent = this.container.createComponent(TwoComponent);
        break;
    }
  }

  // 组件销毁时清理当前组件
  ngOnDestroy() {
    this.currentComponent?.destroy();
  }
}

方案2：动态加载外部HTML并编译 #

如果不想创建大量组件，可直接加载外部HTML文件，动态编译成模板使用。注意要处理Angular安全策略和编译配置。

主组件实现代码：

// main.component.ts
import { Component, ViewChild, ViewContainerRef, Compiler, Injector, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-main',
  standalone: true,
  template: `
    <button (click)="loadTemplate('one')">加载模板1</button>
    <button (click)="loadTemplate('two')">加载模板2</button>
    <div #templateContainer></div>
  `,
  imports: [CommonModule]
})
export class MainComponent {
  @ViewChild('templateContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private http: HttpClient, private compiler: Compiler, private injector: Injector) {}

  async loadTemplate(type: 'one' | 'two') {
    this.container.clear();
    // 加载外部HTML文件
    const html = await this.http.get(`./${type}.html`, { responseType: 'text' }).toPromise();

    // 动态创建并编译组件
    const dynamicComponent = Component({
      template: html,
      standalone: true,
      imports: [CommonModule] // 按需添加所需模块
    })(class {});

    const module = NgModule({
      imports: [dynamicComponent]
    })(class {});

    const compiledModule = await this.compiler.compileModuleAsync(module);
    const factory = compiledModule.componentFactoryResolver.resolveComponentFactory(dynamicComponent);
    this.container.createComponent(factory, 0, this.injector);
  }
}

注意：要确保.html文件放在Angular能访问的目录（如assets），或在angular.json中配置打包规则；同时要保证加载的HTML是可信的，避免XSS风险。

方案3：预导入HTML作为字符串（简单直接） #

如果模板是固定的几种，可直接把HTML文件作为字符串导入，赋值给模板变量使用。但此方案不支持解析Angular指令/组件，仅适合纯静态HTML场景。

1. 先配置tsconfig.json和类型声明：
   在tsconfig.json的compilerOptions中添加：

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

然后创建src/typings.d.ts文件：

declare module '*.html' {
  const content: string;
  export default content;
}

2. 主组件中导入并使用：

// main.component.ts
import { Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
import oneTemplate from './one.html';
import twoTemplate from './two.html';

@Component({
  selector: 'app-main',
  standalone: true,
  template: `
    <button (click)="renderTemplate('one')">加载模板1</button>
    <button (click)="renderTemplate('two')">加载模板2</button>
    <ng-container #templateOutlet></ng-container>
    <ng-template #dynamicTemplate [innerHTML]="currentTemplate"></ng-template>
  `
})
export class MainComponent {
  @ViewChild('dynamicTemplate') dynamicTemplate!: TemplateRef<any>;
  @ViewChild('templateOutlet', { read: ViewContainerRef }) templateOutlet!: ViewContainerRef;
  currentTemplate = '';

  renderTemplate(type: 'one' | 'two') {
    this.templateOutlet.clear();
    this.currentTemplate = type === 'one' ? oneTemplate : twoTemplate;
    this.templateOutlet.createEmbeddedView(this.dynamicTemplate);
  }
}

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