angular - 当组件在 DOM 上不存在时执行 Angular ngOnInit

Question

在这里快速提问，我有一个模态对话框组件，这是 HTML：

<div class="modal__backdrop">
  <div class="modal__container">
    <div class="modal__content" (modalclose)="closeDialog()">
      <ng-container *ngIf="visible === 'open'">
        <ng-content select="bo-wizard"></ng-content>
        <ng-content></ng-content>
      </ng-container>
    </div>
  </div>
</div>

在我使用它的视图中，我有这个 HTMl：

<bo-modal-dialog #modalDialog id="wizardModal">
    <bo-wizard></bo-wizard>
</bo-modal-dialog>

如果您检查此图像，则由于这种情况，模态对话框中的组件在 DOM 上不存在*ngIf="visible === 'open'"：

但是为什么ngOnInit在模态内部的组件bo-wizard中正在执行？我怎样才能解决这个问题。

标签： angular

Answer 1

在 Modal 的父 div 上使用条件

<div class="modal__backdrop" *ngIf="visible === 'open'">
  <div class="modal__container">
    <div class="modal__content" (modalclose)="closeDialog()">
      <ng-container>
        <ng-content select="bo-wizard"></ng-content>
        <ng-content></ng-content>
      </ng-container>
    </div>
  </div>
</div>