Angular 8中如何避免父组件加载时初始化子组件，实现按需触发？

嘿，这个问题我之前做项目时也碰到过——Angular 默认只要组件出现在模板里，哪怕一开始没显示，也会触发它的 OnInit 钩子，确实会平白增加父页面的加载负担。给你几个实用的解决方案，按复杂度从低到高排列：

这是最简单直接的方式，*ngIf 的特性就是：当条件为 false 时，组件根本不会被 Angular 实例化，只有当条件满足（比如点击按钮）时，才会创建组件并触发它的生命周期钩子。

步骤如下：

1. 在父组件类里定义一个控制变量：

// 父组件.ts
showChildComponent = false;

onLoadChild() {
  this.showChildComponent = true;
}

2. 修改父组件模板里的子组件引用：

<!-- 父组件.html -->
<button (click)="onLoadChild()">加载子组件</button>
<app-solicitud-servicios #solicitud1 *ngIf="showChildComponent"></app-solicitud-servicios>

这样一来，只有当你点击按钮后，app-solicitud-servicios 才会被初始化，OnInit 钩子也只会在此时执行。

如果需要更灵活的控制（比如动态切换不同子组件、手动管理组件实例），可以用 Angular 的动态组件加载能力。

步骤如下：

1. 父组件模板里添加一个容器用于挂载动态组件：

<!-- 父组件.html -->
<button (click)="loadChildComponent()">加载子组件</button>
<div #childContainer></div>

2. 父组件类里实现动态创建逻辑：

// 父组件.ts
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { SolicitudServiciosComponent } from './solicitud-servicios.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('childContainer', { read: ViewContainerRef }) childContainer: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadChildComponent() {
    // 先清空容器（如果需要避免重复创建）
    this.childContainer.clear();
    // 创建子组件的工厂类
    const componentFactory = this.resolver.resolveComponentFactory(SolicitudServiciosComponent);
    // 在容器中创建子组件实例
    const componentRef = this.childContainer.createComponent(componentFactory);
    
    // 如果需要给子组件传值，可以直接访问实例属性
    // componentRef.instance.someInputProperty = '你的数据';
  }
}

3. 注意：Angular 8 中需要在模块的 entryComponents 数组里声明这个子组件（Angular 9+ 之后不需要）：

// 父组件所在的模块.ts
@NgModule({
  declarations: [ParentComponent, SolicitudServiciosComponent],
  entryComponents: [SolicitudServiciosComponent] // Angular 8 必须加这行
})
export class ParentModule {}

这种方式和动态加载类似，但写法更简洁，适合只需要按需渲染固定子组件的场景：

1. 父组件模板：

<!-- 父组件.html -->
<button (click)="renderChild()">加载子组件</button>
<ng-template #childTemplate>
  <app-solicitud-servicios #solicitud1></app-solicitud-servicios>
</ng-template>
<div #childContainer></div>

2. 父组件类：

// 父组件.ts
import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('childContainer', { read: ViewContainerRef }) childContainer: ViewContainerRef;
  @ViewChild('childTemplate') childTemplate: TemplateRef<any>;

  renderChild() {
    this.childContainer.clear();
    // 将模板内容插入到容器中
    this.childContainer.createEmbeddedView(this.childTemplate);
  }
}

总结一下：如果只是简单的按需初始化，方案一的 *ngIf 完全够用，代码最少也最容易维护；如果需要更复杂的组件管理逻辑，再考虑方案二或三。

内容的提问来源于stack exchange，提问作者FRANCISCO J. BLANCO