Angular中如何从父组件调用子组件方法？ngOnInit内调用失效如何解决？

问题出在以下几个可定位的点： #

• ViewChild static参数误用：Angular 8+版本中，配置static: true的ViewChild仅能在ngOnInit中获取到未被*ngIf、*ngFor等结构指令包裹的静态组件。如果你的子组件<app-acknowledge-notice-modal>被任意结构指令包裹，static: true配置下ngOnInit阶段获取到的child会是undefined，调用方法自然失效。
• 子组件内部方法逻辑错误：你对filter方法的使用不符合规范，filter是用来返回过滤后新数组的方法，你将业务判断逻辑写在filter回调中，且判断的是外层data.isSuccessful属性而非每一项res的属性，就算方法被成功调用也无法得到预期结果。
• 模板引用和查询规则冲突：你同时在模板声明了#child模板变量，又在TS中使用类名AcknowledgeNoticeModalComponent查询，单组件场景下不会有问题，但若页面存在多个同类型子组件时会查询到不符合预期的实例。

正确实现方案 #

第一步：修正ViewChild配置与调用时机 #

如果子组件是静态渲染（没有被结构指令包裹），可保留static: true，先确认子组件没有被结构指令包裹即可；如果子组件被结构指令包裹，将配置改为static: false，且把调用逻辑移到ngAfterViewInit生命周期钩子中，该阶段ViewChild查询结果已完成初始化。
父组件TS修正后代码：

@ViewChild(AcknowledgeNoticeModalComponent, {static : false}) child : AcknowledgeNoticeModalComponent;

ngAfterViewInit() {
    // 增加空值判断避免控制台报错
    this.child?.showAcknowledgement();
}

第二步：修正子组件方法逻辑 #

修正filter错误用法，同时检查属性名拼写问题：

showAcknowledgement() {
    this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
      if (data.isSuccessful === true) {
        // 假设取第一条通知内容，根据你的业务调整取值逻辑即可
        if(data.data?.length) {
          const res = data.data[0];
          this.noticeText = res.noticeText;
          // 注意原代码属性名拼写：noticeAttachement 请核对后端返回的实际字段名是否为noticeAttachment
          this.noticeAttachment = res.noticeAttachement;
          this.noticeCode = res.noticeCode;
        }
      } else if (data.isSuccessful === false) {
        this.message = [{ field: "", message: data.message[0].message }];
        this.objError = this.message;
        this.showError = true;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    });
}

可选优化：按模板变量查询子组件 #

如果你需要严格匹配模板中声明的#child变量，可将ViewChild查询方式修改为：

@ViewChild('child', {static : false}) child : AcknowledgeNoticeModalComponent;

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