Angular 9中子组件的ngOnInit被调用两次的问题通常是由于在父组件中多次引用子组件导致的。解决这个问题的方法是使用*ngIf指令来确保父组件只引用一次子组件。

以下是一个示例代码，展示了如何解决这个问题：

父组件的模板：

  

Toggle Child Component

父组件的类：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  showChildComponent: boolean = true;

  toggleChildComponent() {
    this.showChildComponent = !this.showChildComponent;
  }
}

子组件的类：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit called');
  }
}

在上述示例中，父组件的showChildComponent属性用于控制子组件的显示和隐藏。当点击按钮时，toggleChildComponent()方法会切换showChildComponent的值，从而控制子组件的显示和隐藏。

使用*ngIf指令确保子组件只在父组件中引用一次，这样就能避免子组件的ngOnInit被调用两次。