为什么使用 *ngIf 从 DOM 中删除元素不会破坏组件？

Question

运行下面的代码时，我单击“切换”按钮在页面上呈现

counter

并将其递增到 5，然后再次切换它，这将

ngIf

内的

div

上的

counter-container

设置为false，这会从 DOM 中删除

counter

。

我预计，当下次单击“切换”时，计数将重置为 0，因为

counter

组件将被销毁并初始化一个新实例。然而计数仍然是 5，通过添加控制台日志，我发现

ngOnDestroy

钩子没有为

counter

运行。

这很令人困惑，因为我认为从 DOM 中删除元素会破坏相关组件。

app.component.html

<button (click)="toggleCounter()">Toggle counter</button>

<container [showContainer]="showCounterContainer">
    <counter></counter>
</container>

app.component.ts

public showCounterContainer: boolean = false;

public toggleCounter() {
    this.showCounterContainer = !this.showCounterContainer
}

counter-container.component.html

<div *ngIf="showContainer">
    <ng-content></ng-content>
</div>

counter-container.component.ts

@Input() public showContainer: boolean = false;

counter.component.html

<button (click)="incrementCounter()">
    Counter: {{counter}}
</button>

计数器.组件.ts

public counter: number = 0;

public incrementCounter(): void {
    this.counter++
}

public ngOnInit(): void {
    console.log('Init')
}

public ngOnDestroy(): void {
    console.log('Destroy')
}

如果我直接将

<counter></counter>

移动到

<container></container>

中（而不是使用

ng-content

），那么执行相同的步骤似乎确实会破坏

counter

组件。这让我认为这与

<counter></counter>

模板中的

app

有关，但我不太确定到底发生了什么。

Answer 1

这个问题似乎问同样的问题。它包含指向这个单独问题的链接，以及有关

ng-content

如何工作的进一步解释。这回答了我的问题，将其留给其他人。