angular - Angular 形|当我使用2 ngIf时，如何读取子组件的属性？

Question

例如)post_no = 1，点击EDIT按钮。

发生错误。

错误:无法读取未定义的属性“编辑”。

...
<app-editor *ngIf="!post_no" #editor_save></app-editor>
<app-editor *ngIf="post_no" #editor_edit></app-editor>
...
<div *ngIf="post_no; else notEdit">
    <button class="post-save-btn" (click)="editor_edit.edit()">EDIT</button>
  </div>
  <ng-template #notEdit>
    <button class="post-save-btn" (click)="editor_save.save()">SAVE</button>
  </ng-template>
</div>

使用两个ngIf似乎会导致属性错误。 (editor_edit.edit())

有没有好的解决方案？

不使用两个ngIf的其他方法也可以。

Answer 1

使用隐藏属性，这将有助于保持DOM存在。

<app-editor [hidden]="post_no" #editor_save></app-editor>
<app-editor [hidden]="!post_no" #editor_edit></app-editor>
...
<div *ngIf="post_no; else notEdit">
    <button class="post-save-btn" (click)="editor_edit.edit()">EDIT</button>
  </div>
  <ng-template #notEdit>
    <button class="post-save-btn" (click)="editor_save.save()">SAVE</button>
  </ng-template>
</div>

这是 Stackblitz演示。