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

您可以简单地使用*ngIf：

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

Answer 2

您的建议书格式：

模板：

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

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

2 个答案: