带有 ngIf 和 ngContent 的 Angular 9 中的生命周期 ngDestroy

Question

我实现了一些基本的步进器（选项卡）并使用 *ngIf 来隐藏，而不是活动的选项卡内容。 但是，如果我在加载页面时在非活动选项卡中使用组件，即使我没有切换到此选项卡，组件也会调用 onInit（而不是在离开时调用 onDestroy）。

附加 stackblitz 以复制链接。 我错过了什么？

AR：即使没有激活第二个选项卡，也会调用 ngOnInit。 并且 ngOnDestroy 不应要求离开此选项卡。

ER：ngOnInit 在第一个选项卡呈现时不调用。 ngOnDestroy 应该要求离开此选项卡。

Answer 1

你的假设是错误的。 如果您从AppComponent查看模板：

<stepper>
  <step>
    some data
  </step>
  <step>
    <app-test></app-test>
  </step>
</stepper>

你清楚地看到<step>和<app-test>都在那里。 它们周围没有*ngIf逻辑，因此它们将始终被“初始化”。 不一定显示，但组件实例确实存在，因为它们是在父模板中定义的，而不是在ng-content中。 <ng-content>基本上只是一个标签，您可以从中将元素从父组件移动到子组件。 然而，组件的上下文保留在父级中，并且它的显示应该以某种方式由父级控制。

有办法解决这个问题。 方法是使您的StepComponent成为结构指令。

@Directive({
  selector: '[step]'
})
export class StepDirective {
  active?: boolean;

  constructor(readonly tr: TemplateRef<any>) {}
}

这会将您的模板更改为：

<stepper>
  <ng-container *step>
    some data
  </ng-container>

  <app-test *step></app-test>
</stepper>

现在这两个步骤是模板的一部分，并且在您明确告诉它这样做之前不会被初始化。 为此，我们需要更新stepper.component.ts ：

_{（仅显示必要的更新）}

@ContentChildren(StepDirective)
tabs: QueryList<StepDirective>;

现在剩下的就是在 stepper.component.html 中使用*ngTemplateOutlet stepper.component.html ：

<div class="tab-body">
  <ng-template [ngTemplateOutlet]="selectedTab.tr"></ng-template>
</div>

这控制模板的初始化并更改当前处于活动状态的选项卡。

工作示例