*ngIf="false" 内的 Angular ng-content 会触发 OnInit 的子组件？

Question

有角度（17 或 18） 不得在 *ngIf="false" 内呈现 但是内容子OnInit被触发了！？

为了测试，我尝试过：

<div class="content" *ngIf="false">
   <ng-content></ng-content>
</div>

还有：

<app-parent>
    <app-child></app-child>
</app-parent>

对于应用程序子项：

ngOnInit() {
    alert('OnInit done...');
}

然后触发alert，证明ngOnInit即使没有渲染也已经初始化了，因为*ngIf="false"！！？

在 stackblitz 上的 Angular 17 和 18 上进行了测试： https://stackblitz.com/edit/stackblitz-starters-2tjcvw?file=src%2Fmain.ts

我不明白什么？我究竟做错了什么？有解决办法吗？ 或者，我应该向 Angular 团队报告错误吗？

Answer 1

尽管您正在父级内部传递组件。该组件仍然使用祖父母组件进行初始化。意思是，我能够从孩子和祖父母那里传递

@Input

和

@Output

。因为组件是根据祖父作用域进行初始化的。它只会被投影到父级的

ng-content

中。这是我的理解，所以这不是一个错误。

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [CommonModule],
  template: `
      <h2>Parent Component</h2>
      <div class="content" *ngIf="false">
        <ng-content></ng-content>
      </div>
  `,
})
export class ParentComponent {}

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <h3>Child Component</h3>
    <button (click)="outputEmitter.emit()">emit</button>
  `,
})
export class ChildComponent implements OnInit {
  @Input() input: any;
  @Output() outputEmitter: EventEmitter<any> = new EventEmitter<any>();
  ngOnInit() {
    alert('OnInit done...' + this.input);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ParentComponent, ChildComponent],
  template: `
    <app-parent>
      <app-child [input]="name" (outputEmitter)="emit()"></app-child>
    </app-parent>
  `,
})
export class App {
  name = 'Angular';

  emit() {
    alert('emit from child to grandparent');
  }
}

bootstrapApplication(App);

Stackblitz 演示