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

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

ng-template

1 个答案: