Angular 17 拒绝实例化组件

Question

我无法用任何东西重现它，而且我完全无法解释为什么会发生这种情况......我有以下组件（sideElementIs3d 设置为 true，因此它显示了 Threes-js 应用程序）：

<div>
   <img src="assets/img/thumb/square.jpg" alt="">
   <div *ngIf="!sideElementIs3d" [ngStyle]="{'background-image':' url(assets/img/right.png)'}">
   </div>
   <app-three-js-interactive *ngIf="sideElementIs3d"></app-three-js-interactive>
</div>

还有 app- Three-js-interactive 组件：

<canvas #canvas></canvas>

我现在花了大约 5 个小时，试图找出为什么

app-three-js-interactive

没有被创建，而我的 HTML 检查器看起来就像这样，组件内部什么也没有。没有构造函数调用，没有 ngInit，没有 ngAfterViewInit，什么都没有......

即使从组件中删除所有代码，它仍然没有实例化任何东西

@Component({
  selector: 'app-three-js-interactive',
  templateUrl: './three-js-interactive.component.html'
})
export class ThreeJsInteractiveComponent implements AfterViewInit {

  @Input() scene!: THREE.Scene;

  @ViewChild('canvas', { static: false }) canvasRef!: ElementRef<HTMLCanvasElement>;

  dog!: AnimationController;

  constructor(private canvasParentRef: ElementRef, private threeService: ThreejsProviderService) { 
    console.log("help!")
  }

  ngAfterViewInit(): void {
    console.log("help!")
  }

该模块是在 app.module.ts 中声明的，我已经做了我能想到的一切让它工作，但我完全没有想法，如果我制作一个新组件它工作得很好，但这个组件只是不想在我正在尝试的地方创建。它确实在不同的位置工作，这让我更加困惑...有谁知道为什么会发生这种情况，或者您需要任何其他信息来帮助我弄清楚发生了什么...

Answer 1

正如评论中提到的，

ThreeJsInteractiveComponent

（或声明它的模块）必须导入到实现的独立组件中才能显示其内容：

@Component({
  standalone: true,
  ...
  template: `<app-three-js-interactive />`,
  imports: [
    ThreeJsInteractiveComponent
  ]
})
export class MyComponent {}