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

我尝试实施角嵌套翻译（链接的内容有翻译，而这个链接已经被嵌入到另译），这一切都归结为我以下情形：如何在插入Angular 4时插入模板？

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

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

但是，在上述情况下link是TemplateRef对象。所以我的问题是，我如何用TemplateRef的内容替换大括号的内容？

预先感谢您！

来源

2017-09-05 nakajuice

您期望得到的html是什么？ –

更新角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

搜索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

来源

2017-09-05 12:37:15

谢谢您的及时答复！我有一个后续问题：'你的链接：{{link}}'实际上是来自外部API的翻译，我宁愿在我的翻译中不要有''我想保留它作为'{{link}}'，但有什么办法可以强制执行吗？ – nakajuice

对不起，那我可能不明白这个问题。 ''会导致名称冲突，因为'＃link'引入了一个模板变量，指向''你在用什么'＃link'呢？ –

我更新了我的答案。仍然不确定，如果这是你想要的。 –

您还可以安装一个模板，在下面的方法条件。如果您想在其他条件下加载您的模板。

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

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

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

来源

2017-09-05 12:42:56

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

回答

相关问题