在ngSwitch中使用ng-template引用 [英] Using ng-template reference in ngSwitch
本文介绍了在ngSwitch中使用ng-template引用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不想在每个 * ngSwitchCase
块中编写 html
代码,而是要添加对 ng-template
的引用从这个想法(来自角度文档):
Instead of writing the html
code in each *ngSwitchCase
block, I want to add a reference to a ng-template
took the idea from this (from angular docs):
<div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
<ng-template #primaryBlock>Primary text to show</ng-template>
想要这样做:
<div [ngSwitch]="switchVar">
<div *ngSwitchCase="1; then myTemplate"></div>
<div *ngSwitchDefault>output2</div>
</div>
<ng-template #myTemplate>HTML TEXT</ng-template>
代替此:
<div [ngSwitch]="switchVar">
<div *ngSwitchCase="1">HTML TEXT</div>
<div *ngSwitchDefault>output2</div>
</div>
推荐答案
可以通过 ngTemplateOutlet .第二个模板还演示了传递上下文的能力.
Can be achieved with ngTemplateOutlet. Second template also demonstrates ability of passing context.
<div [ngSwitch]="switchVar">
<div *ngSwitchCase="1">
<ng-container *ngTemplateOutlet="tmplFirst"></ng-container>
</div>
<div *ngSwitchDefault>
<ng-container *ngTemplateOutlet="tmplSecondWithContext; context: {bar: 42}"></ng-container>
</div>
</div>
<ng-template #tmplFirst>HTML TEXT</ng-template>
<ng-template #tmplSecondWithContext let-foo="bar">Output: {{foo}}</ng-template>
这篇关于在ngSwitch中使用ng-template引用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文