Условно показать одного ребенка или другого

Question

Я пытаюсь создать компонент, который будет отображать внутренний 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 шаблоне?

Answer 1

Yo propongo la siguiente forma:

ШАБЛОН:

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

Answer 2

Вы можете просто использовать *ngIf для этого:

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