有条件地展示一个孩子或另一个孩子

Posted 2021-04-09

我正在尝试创建一个可以渲染内部html的组件，但是在单击时它会用可编辑的版本替换它自己。我觉得这样的事情会起作用：

<field (onClick)="isEditModeOn = true;">
  <read-value>
      <h2>{{ someValue }}</h2>
  </read-only>
  <editable>
      <input type="text" [value]="someValue"/>
  </editable>
</field>

然后在field.component中我可以引用那些内部组件：

@Component({
  ...
})
class Field {
  ...
  isEditModeOn = false;

  @ContentChild(ReadValueComponent) readValue: ReadValueComponent;
  @ContentChild(EditableComponent) editable: EditableComponent;
  ...

  onEdit() {
    if(isEditModeOn) {
      // render `editable`
    } else {
      // render `readValue`
    }
  }
}

但是如何在field模板中渲染其中一个组件？

答案

你可以简单地使用*ngIf：

<field (onClick)="isEditModeOn = true;">
    <read-value *ngIf="!isEditModeOn">
        <h2>{{ someValue }}</h2>
    </read-only>
    <editable *ngIf="isEditModeOn">
        <input type="text" [value]="someValue"/>
    </editable>
</field>

另一答案

我提出以下表格：

模板：

<field (click)="isEditModeOn = !isEditModeOn;">

      <h2 *ngIf="!isEditModeOn">{{ someValue }}</h2>


      <input *ngIf="isEditModeOn" type="text" [value]="someValue"/>

</field>

零件：

 @Component({
      ...
    })
    class Field {
      ...
      isEditModeOn: boolean = false;

      ...

      @HostListener('click') onEdit() {
        if(isEditModeOn) {
          // render `editable`
        } else {
          // render `readValue`
        }
      }
    }