如何在Angular中创建可全局复用的HTML代码片段库？

这在Angular中完全可行，以下是两种高效实现方式，均无需在使用时编写繁琐的@ViewChild代码：

方案一：服务驱动的全局模板管理（推荐） #

通过一个单例服务统一存储和分发模板引用，实现跨组件的模板复用。

1. 创建模板管理服务 #

// global-templates.service.ts
import { Injectable, TemplateRef } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class GlobalTemplatesService {
  private templateStore = new Map<string, TemplateRef<any>>();

  registerTemplate(key: string, template: TemplateRef<any>): void {
    this.templateStore.set(key, template);
  }

  getTemplate(key: string): TemplateRef<any> | undefined {
    return this.templateStore.get(key);
  }
}

2. 创建全局模板组件 #

该组件负责定义所有通用HTML片段，并在初始化时将模板引用注册到服务中：

// global-templates.component.ts
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { GlobalTemplatesService } from './global-templates.service';

@Component({
  selector: 'app-global-templates',
  template: `
    <ng-template #settingsSvgIcon>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 1.54l4.24 4.24M20.46 20.46l-4.24-4.24M1.54 20.46l4.24-4.24"></path>
      </svg>
    </ng-template>

    <ng-template #userAvatarIcon>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
    </ng-template>
  `,
  styles: [`:host { display: none; }`]
})
export class GlobalTemplatesComponent implements OnInit {
  @ViewChild('settingsSvgIcon') private settingsIcon!: TemplateRef<any>;
  @ViewChild('userAvatarIcon') private userAvatar!: TemplateRef<any>;

  constructor(private templateService: GlobalTemplatesService) {}

  ngOnInit(): void {
    this.templateService.registerTemplate('settings', this.settingsIcon);
    this.templateService.registerTemplate('userAvatar', this.userAvatar);
  }
}

通过:host { display: none; }隐藏组件本身，仅保留模板引用的注册能力。

3. 全局注册组件 #

将组件添加到根模块（或共享模块）的declarations和exports中，确保全项目可用：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalTemplatesComponent } from './global-templates/global-templates.component';

@NgModule({
  declarations: [AppComponent, GlobalTemplatesComponent],
  imports: [BrowserModule],
  exports: [GlobalTemplatesComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 在任意组件中使用 #

先在根组件模板中引入全局模板组件（只需一次，全局生效）：

<!-- app.component.html -->
<app-global-templates></app-global-templates>
<!-- 其他页面内容 -->

然后在任意子组件中通过服务获取模板并渲染：

// sample.component.ts
import { Component } from '@angular/core';
import { GlobalTemplatesService } from '../global-templates/global-templates.service';

@Component({
  selector: 'app-sample',
  template: `
    <div class="icon-group">
      <span>设置图标：</span>
      <ng-container *ngTemplateOutlet="getTemplate('settings')"></ng-container>
    </div>

    <div class="icon-group">
      <span>用户图标：</span>
      <ng-container *ngTemplateOutlet="getTemplate('userAvatar')"></ng-container>
    </div>
  `
})
export class SampleComponent {
  constructor(private templateService: GlobalTemplatesService) {}

  getTemplate(key: string) {
    return this.templateService.getTemplate(key);
  }
}

方案二：直接通过组件引用复用（简化版） #

无需服务，直接通过组件实例的公共属性访问模板引用：

1. 修改全局模板组件，暴露模板属性 #

// global-templates.component.ts
@Component({
  // 模板和样式同方案一
})
export class GlobalTemplatesComponent {
  @ViewChild('settingsSvgIcon') public settingsSvgIcon!: TemplateRef<any>;
  @ViewChild('userAvatarIcon') public userAvatarIcon!: TemplateRef<any>;
}

2. 在目标组件中使用 #

在需要复用模板的组件模板中，引入全局模板组件并通过模板引用访问：

<!-- sample.component.html -->
<app-global-templates #globalTpls></app-global-templates>

<ng-container *ngTemplateOutlet="globalTpls.settingsSvgIcon"></ng-container>
<ng-container *ngTemplateOutlet="globalTpls.userAvatarIcon"></ng-container>

额外技巧：给模板传递上下文 #

如果需要给模板动态传递数据，可使用*ngTemplateOutlet的context参数：

<!-- 传递数据 -->
<ng-container *ngTemplateOutlet="getTemplate('settings'); context: { $implicit: 'primary', size: 32 }"></ng-container>

在模板中接收数据：

<ng-template #settingsSvgIcon let-color let-size="size">
  <svg [width]="size" [height]="size" stroke="{{ color }}">
    <!-- 图标内容 -->
  </svg>
</ng-template>

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