单击Angular 6时更改模板

Question

我有一个芯片列表，具体取决于所单击的芯片，它将改变。如果用户单击“汽油”芯片，则模板将切换为源输入和目标输入，如果单击酒店，它将转换为标签输入。我的困难是要根据条件转换这些依赖于模板的模板

<div fxFlex="100">
  <mat-form-field fxFlex ngStyle.gt-sm="margin-left:30px" *ngIf="descriptionTags == 'default'; else tagDescription">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
  </mat-form-field>

  <ng-template #tagDescription>
    <mat-chip-list class="mat-chip-list">
      <mat-chip *ngFor="let tags of descriptionTags" value>
        {{tags.nameTag}}
      </mat-chip>
    </mat-chip-list>
  </ng-template>

  <ng-template #inputListTags>

    <h1>TAG INPUT LIST</h1>

  </ng-template>

  <ng-template #OriginDestinationReason>

    <h1>TAG Origin Destination adn Reason</h1>

  </ng-template>

  <ng-template #OriginDestination>

    <h1>TAG Origin Destination</h1>

  </ng-template>
</div>

Answer 1

由于您将descriptionTags属性用作对象数组和string，因此可以将descriptionTags的类型指定为descriptionTags: (string | any[])

然后您可以随时在它们之间切换。在此示例中，我根据单击的按钮进行了切换。

这是您推荐的Sample StackBlitz。

Answer 2

基本上就是这样，我将拥有一个随客户或用户点击标签而变化的组件，我将拥有三种类型的标签模板 论文的这一部分已经完成，当用户单击标签时，模板将根据业务规则进行更改。例如A B C D，当用户单击标签A时，它将打开一个模板来代替A B C D，并且在该模板中将有两个Input –

<div fxFlex="100">
  <mat-form-field fxFlex ngStyle.gt-sm="margin-left:30px" *ngIf="descriptionTags == 'default'; else tagDescription">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
  </mat-form-field>

  <ng-template #tagDescription>
    <mat-chip-list class="mat-chip-list">
      <!-- *ngIf="user click tag.name ='A'"; if else 'B' > -->
      <mat-chip *ngFor="let tags of descriptionTags" >
        {{tags.nameTag}}
      </mat-chip>
    </mat-chip-list>
  </ng-template>

  <ng-template #A>
 <!-- displays this template instead of mat-chip-list -->
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">

  </ng-template>

  <ng-template #B>

    <h1>TAG Origin Destination adn Reason</h1>

  </ng-template>

  <ng-template #OriginDestination>

    <h1>TAG Origin Destination</h1>

  </ng-template>
</div>