如何在 angular 6 中使用模板选择？

Question

取决于我要显示特定模板的条件。

if "this.showTemplateOrigDestReason = true" 则显示模板“#OriginDestinationReason”等等...

 changeTemplate(ruletagName) {
  
    console.log(ruletagName)
   if(ruletagName == 'OriginDestinationReason'){
     this.showTemplateOrigDestReason = true;
   }else if(ruletagName == 'inputList'){
    this.showTemplateInputList = true;
   }else{
     this.showTemplateOrigDest = true;
   }  
  }

}

<ng-template #tagDescription >
  <mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
    <mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
       {{tags.nameTag}}
    </mat-chip>
  </mat-chip-list>
</ng-template>



<ng-template #InputListTag>
 <mat-form-field fxFlex="30" >
   <h1>InputListTag</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestinationReason>
 <mat-form-field fxFlex="30" >
   <h1>OriginDestinationReason</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestination>
 <mat-form-field fxFlex="30" >
   <h1>OriginDestination</h1>
 </mat-form-field>
</ng-template>

Answer 1

尝试使用 Angular

提供的 [ngIf] 指令

<ng-template #InputListTag [ngIf]="showTemplateInputList">
 <mat-form-field fxFlex="30" >
   <h1>InputListTag</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
 <mat-form-field fxFlex="30" >
   <h1>OriginDestinationReason</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
 <mat-form-field fxFlex="30" >
   <h1>OriginDestination</h1>
 </mat-form-field>
</ng-template>

Answer 2

一种方法是简单地使用 ruletagName 和 ngSwitch。

<ng-container [ngSwitch]="ruletagName">
    <ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
    <ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
    ...
</ng-container>

Here's a full example.

如何在 angular 6 中使用模板选择？

How to work with template choice in angular 6?

angular-material2

angular

angular6