在ngSwitch中使用ng-template参考

时间:2017-05-25 15:39:58

标签: angular

我想添加对using (var db = new LiteRepository("lite.db")) { db.Insert(new User { Name = "John" }); var user = db.Query<User>() .Where(x => x.Name == "JOHN") .FirstOrDefault(); // proposal return John var fail = db.Query<User>() .Where(x => string.Equals(x.Name, "JOHN", StringComparison.OrdinalIgnoreCase)) .FirstOrDefault(); // throw exception } 的引用,而不是在每个html块中编写*ngSwitchCase代码 从这个角度来看(来自角度文档):

ng-template

想要这样做:

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

1 个答案:

答案 0 :(得分:0)

可以通过ngTemplateOutlet实现。第二个模板还演示了传递上下文的能力。

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