Angular是否支持类似WPF的XAML模板库复用功能？

当然有啦！在Angular里，你完全可以实现和WPF中XAML模板库类似的效果——把通用HTML模板抽出来，让各个组件都能轻松复用。下面给你几种最常用的实现方式：

1. 创建可复用组件（最常用的方案） #

这就相当于WPF里的自定义控件模板，把通用的UI结构+逻辑封装成独立组件，其他组件直接调用即可。比如我们做一个通用卡片组件：

步骤1：编写通用组件 #

// shared/components/card/card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  // 定义输入属性，让父组件可以传递数据
  @Input() cardTitle: string = '';
  @Input() cardSubtitle: string = '';
}

<!-- shared/components/card/card.component.html -->
<div class="card-container">
  <h2 class="card-title">{{ cardTitle }}</h2>
  <p class="card-subtitle">{{ cardSubtitle }}</p>
  <!-- 使用ng-content插槽，允许父组件插入自定义内容，类似WPF的ContentPresenter -->
  <ng-content></ng-content>
</div>

步骤2：在其他组件中使用 #

<!-- user-profile.component.html -->
<app-card cardTitle="用户信息" cardSubtitle="个人资料">
  <p>姓名：张三</p>
  <p>邮箱：zhangsan@example.com</p>
</app-card>

2. 使用ng-template实现纯UI模板复用 #

如果只是需要复用纯UI片段（没有逻辑），ng-template就很合适，它相当于WPF里的纯模板定义，本身不会渲染，需要通过其他方式引用。

步骤1：定义通用模板 #

可以把常用的模板片段放到单独的文件里，比如一个空状态模板：

<!-- shared/templates/empty-state.template.html -->
<ng-template #emptyStateTemplate>
  <div class="empty-state">
    <svg class="empty-icon" viewBox="0 0 24 24"></svg>
    <p>暂无数据，请稍后重试</p>
    <button class="refresh-btn">刷新</button>
  </div>
</ng-template>

步骤2：在组件中引用 #

你可以直接在组件模板里复用这个片段：

<!-- product-list.component.html -->
<!-- 当产品列表为空时，显示空状态模板 -->
<ng-container *ngIf="products.length === 0; else emptyStateTemplate">
  <!-- 产品列表内容 -->
  <div *ngFor="let product of products">{{ product.name }}</div>
</ng-container>

<!-- 引入共享的空状态模板 -->
<ng-template #emptyStateTemplate>
  <div class="empty-state">
    <svg class="empty-icon" viewBox="0 0 24 24"></svg>
    <p>暂无数据，请稍后重试</p>
    <button class="refresh-btn">刷新</button>
  </div>
</ng-template>

3. 用共享模块实现全局引用 #

要让这些通用模板/组件在整个应用里都能直接使用，就需要借助共享模块（Shared Module），这和WPF里全局注册模板库的逻辑一致：

步骤1：创建共享模块 #

// shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardComponent } from './components/card/card.component';
// 导入其他通用组件、指令、管道等

@NgModule({
  declarations: [
    CardComponent
    // 声明所有通用组件、模板相关的内容
  ],
  imports: [
    CommonModule
  ],
  exports: [
    CardComponent
    // 导出需要在其他模块中使用的内容
  ]
})
export class SharedModule { }

步骤2：全局导入共享模块 #

在你的根模块（AppModule）或者其他功能模块里导入SharedModule，这样所有组件都能直接使用共享模块里的内容了：

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule // 全局导入共享模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 高级方案：Angular CDK Portal（动态模板加载） #

如果需要更复杂的场景（比如动态将模板插入到页面任意位置，类似WPF的弹出窗口模板），可以使用Angular CDK的Portal功能，它允许你动态加载模板到指定的容器中，适合做模态框、侧边栏这类组件。

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