Ionic应用实现OnInit后ngOnInit()首次运行仍未触发如何解决

问题产生原因 #

• 组件未被实际挂载到视图：包括组件selector拼写错误、模板中未引用该组件、组件被包裹在*ngIf恒为false的容器内，从未触发渲染流程
• 组件类未添加@Component装饰器：Angular只会对带@Component装饰器的类触发生命周期钩子，缺少该装饰器时类会被识别为普通TS类，不会执行ngOnInit
• 模块注册错误：组件未在所属Angular模块的declarations数组中声明，或是声明到了未导入的其他模块，模板无法正确解析组件标签
• 动态渲染配置错误：如果组件通过Ionic的模态框、弹出层等动态API创建，调用API时传入的component参数不是当前AudioRecorderComponent类，而是错误的目标
• 构造函数异常阻断：如果组件构造函数内抛出未捕获的异常，会直接终止后续生命周期的执行，可优先检查控制台是否存在其他报错信息

组件初始化逻辑的替代实现方案 #

• 构造函数内执行：初始化逻辑不依赖DOM时，可直接写在组件类的构造函数中，构造函数会在组件实例创建时第一时间执行
• 使用ngOnChanges钩子：如果组件存在@Input入参，ngOnChanges会在入参首次赋值时触发，执行时机早于ngOnInit
• 使用Ionic专属生命周期钩子：如果该组件是路由页面级组件，可改用ionViewWillEnter钩子，不受Ionic路由缓存影响，每次页面进入视图都会触发
• 动态组件手动触发：如果是通过Ionic API动态创建的组件，可在拿到组件实例后主动调用自定义初始化方法，示例：

// 模态框创建场景示例
const modal = await this.modalController.create({
  component: AudioRecorderComponent
});
// 手动调用初始化逻辑
(modal.componentInstance as AudioRecorderComponent).customInit();
await modal.present();

• 使用ngAfterViewInit钩子：如果初始化逻辑依赖DOM节点渲染完成，可使用该钩子，会在组件视图首次渲染完毕后触发

内容的提问来源于stack exchange，提问作者WestCoastProjects