Angular中如何向ng-template传递动态数据实现模板复用

提问内容： #

我是Angular新手，正纠结如何向模板传递字符串。我想要创建一个可复用模板（或组件）来显示操作指引信息。目前我通过以下方式实现：

<div *ngIf="foo; else noFoo"> <!-- Show things --> </div>
<div *ngIf="bar; else noBar"> <!-- Show things --> </div>
<ng-template #noFoo>
  <div class="message">
    <h4>No Foo</h4>
    <p>Please do foo to continue.</p>
  </div>
</ng-template>
<ng-template #noBar>
  <div class="message">
    <h4>No Bar</h4>
    <p>Please do bar to continue.</p>
  </div>
</ng-template>

这虽然能正常工作，但会产生大量代码重复的模板。我希望改成类似这样的实现：

<div *ngIf="foo; else showMessage"> <!-- Show things --> </div>
<div *ngIf="bar; else showMessage"> <!-- Show things --> </div>
<ng-template #showMessage>
  <div class="message">
    <h4>{{ heading }}</h4> <!-- get dynamic heading -->
    <p>{{ message }}</p> <!-- get dynamic message -->
  </div>
<ng-template>

希望能得到方向指引，谢谢！

解决方案 #

你可以借助Angular的*ngTemplateOutlet指令来实现模板复用，并通过context传递动态数据。以下是优化后的完整实现代码：

组件模板部分：

<ng-container *ngIf="!foo">
  <ng-container *ngTemplateOutlet="showMessage; context: messages.noFoo"></ng-container>
</ng-container>
<ng-container *ngIf="!bar">
  <ng-container *ngTemplateOutlet="showMessage; context: messages.noBar"></ng-container>
</ng-container>

<ng-template #showMessage let-heading="heading" let-message="message">
  <div class="message">
    <h4>{{ heading }}</h4>
    <p>{{ message }}</p>
  </div>
</ng-template>

组件类部分：

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

@Component({
  // 这里填写你的组件元数据，比如selector、templateUrl等
})
export class YourComponent {
  // 定义控制显示状态的变量
  public foo: boolean = false;
  public bar: boolean = false;

  // 存储所有提示信息的对象
  public messages: any = {
    noFoo: { heading: 'No Foo', message: 'Please do foo to continue.' },
    noBar: { heading: 'No Bar', message: 'Please do bar to continue.' }
  };
}

关键说明 #

• *ngTemplateOutlet是实现模板复用的核心，它可以指定要渲染的目标模板，同时通过context参数传递动态数据。
• 模板中使用let-xxx="xxx"的语法，就能接收context里对应的变量，实现动态渲染不同的标题和提示内容。
• 使用ng-container作为容器，不会额外生成多余的DOM元素，能保持页面结构的整洁性。

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