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

我使用它來創建許多行為相似的元素，但需要在它們之間進行一些修改。