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

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