угловой | когда я использую 2 ngIf, как прочитать свойство дочернего компонента?

Question

ex) post_no = 1, нажмите кнопку EDIT.

Произошла ошибка.

ошибка: невозможно прочитать свойство '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 ())

Есть ли хорошее решение?

Другие способы, которые не используют два ngIfs, в порядке.

Answer 1

* NgIf удаляет компонент из DOM. Таким образом, вы не можете получить доступ к компоненту, как вы сделали.

В качестве альтернативы вы можете использовать атрибут [hidden], который использует свойство css "display: none".

Answer 2

использовать скрытый атрибут, это поможет сохранить 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 .