Angular复用ng-template方法咨询及空数据处理方案合理性探讨

Q1: 如何定义可复用的ng-template或通用模板引用变量？ #

你的尝试方向没问题，但踩了Angular模板作用域和废弃特性的坑，给你两种靠谱的解决方案：

方案1：创建通用占位符组件（最推荐，适合简单场景）

既然你的占位符内容是固定的<span>-</span>，直接封装成组件是最省心的复用方式，后续修改只需改动这一个组件：

1. 生成组件：

ng generate component empty-placeholder

2. 修改empty-placeholder.component.html：

<span>-</span>

3. 在需要的组件模板里替换else分支：
   组件1模板示例：

<div *ngIf="user?.name; else emptyPlaceholder">{{user?.name}}</div>
<ng-template #emptyPlaceholder><app-empty-placeholder></app-empty-placeholder></ng-template>

后续要修改占位符样式或内容，只需要更新empty-placeholder组件，所有引用的地方都会自动同步，完全避免重复修改。

方案2：封装共享模板（适合需要动态内容的场景）

如果以后你的占位符需要支持自定义文本、图标等动态内容，可以把模板封装在共享模块里，通过ngTemplateOutlet复用：

1. 创建共享模板组件shared-templates.component.ts：

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

@Component({
  selector: 'app-shared-templates',
  template: `
    <ng-template #dashTemplate>
      <span>{{ placeholderText || '-' }}</span>
    </ng-template>
  `
})
export class SharedTemplatesComponent {
  @ViewChild('dashTemplate') dashTemplate!: TemplateRef<any>;
  @Input() placeholderText?: string;
}

2. 在目标组件中导入该组件所在的模块，然后在模板中引用：

<app-shared-templates #sharedTemplates></app-shared-templates>

<div *ngIf="user?.name; else dashTemplate">{{user?.name}}</div>
<ng-template #dashTemplate>
  <ng-container *ngTemplateOutlet="sharedTemplates.dashTemplate"></ng-container>
</ng-template>

这种方式支持传递参数（比如自定义占位符文本），灵活性更高。

Q2: 这种空数据处理方式是否合理？ #

非常合理！用*ngIf else区分「有数据显示内容/无数据显示占位符」是Angular开发中处理空值的常规操作，逻辑清晰且易维护，尤其适合需要明确区分「数据存在」和「数据缺失」状态的场景。

不过可以根据场景优化：

• 如果只是简单的文本替换（把null/undefined转换成-），可以用自定义管道简化代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'emptyValue'})
export class EmptyValuePipe implements PipeTransform {
  transform(value: any, placeholder: string = '-'): any {
    return value ?? placeholder;
  }
}

模板可简化为：

<div>{{ user?.name | emptyValue }}</div>

这种方式代码更简洁，适合纯文本场景。

• 如果占位符是复杂HTML结构（比如带图标、提示文字），那还是用*ngIf else+复用组件/模板的方式更合适。

为啥你之前的方案失败了？ #

1. 上级组件的#dash-template无法被子组件引用：模板引用变量的作用域仅限于当前模板内部，子组件的模板是独立作用域，所以无法访问父组件的模板变量。
2. HTML Imports已废弃：<link rel="import">是早期Web Components的特性，现在已被浏览器废弃，Angular也不支持这种方式加载外部模板。

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