Angular 5：如何通过ngTemplateOutlet将ng-template传入子组件？

我完全懂你想要构建可复用分页列表组件的需求——把分页逻辑封装在组件里只写一次，让父组件通过ng-template自定义数据展示，这确实是Angular中复用业务逻辑的绝佳方式。你遇到的ERROR Typ...（TypeScript类型错误），在使用ngTemplateOutlet时非常常见，我来帮你一步步排查和解决。

常见错误原因及解决方案 #

1. 未正确定义模板上下文的类型 #

这是最常见的问题：子组件没有明确TemplateRef的上下文类型，导致TypeScript无法识别父组件模板中使用的变量类型，从而抛出类型错误。

解决方法：

在子组件中给TemplateRef指定泛型，明确上下文的结构，同时确保ngTemplateOutletContext传递的参数和这个类型匹配。

子组件代码示例（分页列表组件）：

import { Component, Input, TemplateRef, Output, EventEmitter } from '@angular/core';

// 先定义分页参数的类型，保证类型安全
export interface PaginationConfig {
  currentPage: number;
  pageSize: number;
  totalItems: number;
}

@Component({
  selector: 'app-reusable-paginated-list',
  templateUrl: './reusable-paginated-list.component.html'
})
export class ReusablePaginatedListComponent<T> {
  // 父组件传入的数据列表
  @Input() data: T[] = [];
  // 父组件传入的自定义模板，明确上下文类型：$implicit是当前数据项，index是索引
  @Input() itemTemplate!: TemplateRef<{ $implicit: T; index: number }>;
  // 分页配置
  @Input() pagination: PaginationConfig = { currentPage: 1, pageSize: 10, totalItems: 0 };
  // 分页切换事件，通知父组件请求对应页的数据
  @Output() pageChange = new EventEmitter<number>();

  // 分页逻辑封装在这里
  handlePageChange(newPage: number) {
    if (newPage < 1 || newPage > this.totalPages) return;
    this.pageChange.emit(newPage);
  }

  get totalPages(): number {
    return Math.ceil(this.pagination.totalItems / this.pagination.pageSize);
  }
}

子组件HTML：

<!-- 封装的分页控件 -->
<div class="pagination-bar">
  <button (click)="handlePageChange(pagination.currentPage - 1)" 
          [disabled]="pagination.currentPage === 1">上一页</button>
  <span>第 {{pagination.currentPage}} 页 / 共 {{totalPages}} 页</span>
  <button (click)="handlePageChange(pagination.currentPage + 1)" 
          [disabled]="pagination.currentPage === totalPages">下一页</button>
</div>

<!-- 使用父组件的模板渲染数据 -->
<div class="list-wrapper">
  <ng-container *ngFor="let item of data; let i = index">
    <!-- 传递上下文给父组件模板 -->
    <ng-template [ngTemplateOutlet]="itemTemplate" 
                 [ngTemplateOutletContext]="{ $implicit: item, index: i }">
    </ng-template>
  </ng-container>
</div>

2. 父组件模板未正确绑定上下文变量 #

如果父组件模板中使用的变量名和子组件传递的上下文键名不匹配，也会触发类型错误。比如子组件传递了$implicit，但父组件用了let-user="user"而不是let-user。

父组件使用示例：

<!-- 引用可复用分页组件 -->
<app-reusable-paginated-list
  [data]="products"
  [pagination]="{ currentPage: currentPage, pageSize: 10, totalItems: totalProducts }"
  [itemTemplate]="productItemTemplate"
  (pageChange)="onPageChange($event)">
</app-reusable-paginated-list>

<!-- 自定义数据展示模板 -->
<ng-template #productItemTemplate let-product let-index="index">
  <div class="product-card">
    <h3>{{index + 1}}. {{product.name}}</h3>
    <p>价格: {{product.price}} 元</p>
    <p>库存: {{product.stock}} 件</p>
  </div>
</ng-template>

父组件TS：

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

// 定义商品类型
interface Product {
  name: string;
  price: number;
  stock: number;
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html'
})
export class ProductListComponent {
  products: Product[] = [];
  currentPage = 1;
  totalProducts = 0;

  ngOnInit() {
    // 模拟请求第一页数据
    this.loadProducts(this.currentPage);
  }

  onPageChange(page: number) {
    this.currentPage = page;
    this.loadProducts(page);
  }

  private loadProducts(page: number) {
    // 这里替换成实际的API请求
    this.products = [
      { name: '笔记本电脑', price: 5999, stock: 20 },
      { name: '无线鼠标', price: 99, stock: 100 }
    ];
    this.totalProducts = 100;
  }
}

3. 模板引用变量未正确传递 #

如果父组件没有把模板的引用变量（比如#productItemTemplate）正确传递给子组件的itemTemplate输入属性，也会导致错误。一定要确保子组件的@Input参数名和父组件绑定的属性名完全一致。

快速排查清单 #

• 确认子组件中TemplateRef的泛型定义和ngTemplateOutletContext的结构完全匹配
• 检查父组件模板中let-xxx的命名：let-product对应上下文的$implicit，let-index="index"对应上下文的index键
• 确保父组件的模板引用变量（#xxx）正确传递给子组件的输入属性

这样调整后，你应该就能解决那个类型错误，同时实现一个完全复用分页逻辑、支持自定义展示的组件了。

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