javascript - 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

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