ng-template 中的动态数据

Question

我对 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>

如果能朝着正确的方向推动，我们将不胜感激。谢谢！

解决方案

我能够使用提供的答案来创建以下内容：

模板：

<ng-container *ngIf="!foo; showFoo">
  <ng-container *ngTemplateOutlet="showMessage; context: messages.noFoo"></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>

成分：

public messages: any = {
  noFoo: { heading: 'No Foo', message: 'Please do foo to continue.' },
  noBar: { heading: 'No Bar', message: 'Please do bar to continue.' }
}

Answer 1

使用 ngTemplateOutletContext。这允许您将参数或变量传递到要使用的模板中。

此处的文档 => https://angular.io/api/common/NgTemplateOutlet

我使用它创建了许多行为和外观相似的元素，但需要在它们之间进行一些修改。