Question

我尝试在Angular中实现嵌套翻译（链接的内容具有翻译功能，此链接必须嵌入到另一个翻译中），这一切都归结为以下情况：

<ng-template #link>
  <a href="#">Test</a>
</ng-template>

<p>Your link: {{link}}</p>

但是，在上面的例子中，link是TemplateRef对象。所以我的问题是，如何用TemplateRef的内容替换大括号的内容？

提前谢谢！

Answer 1

更新Angular 5

ngOutletContext已重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

<强>原始

NgTemplateOutlet做你想做的事：

<p>Your link: <ng-container *ngTemplateOutlet="link"></ng-container></p>

您还可以传递上下文数据以用于模板内的绑定。

https://angular.io/api/common/NgTemplateOutlet

在StackOverflow上搜索NgTemplateOutlet应该提供更多示例。

<强>更新

<ng-template #linkTemplate let-link>
  <a href="#">{{link}}</a>
</ng-template>

<p>Your link: <ng-container *ngTemplateOutlet="linkTemplate; context: {$implicit: link}"></ng-container></p>

Plunker example

Answer 2

您还可以在下面的方式中使用条件拟合模板。如果您想在其他情况下加载模板。

    <ng-content *ngIf="!content; else link">

    </ng-content>
    <ng-template #link>
      <div [innerHtml]="otherContent">

      </div>
    </ng-template>
  </div>

如何在Angular 4中插入时插入模板？

2 个答案: