typescript Angular 14从父组件调用子组件方法

qcbq4gxm 于 2023-01-14 发布在 TypeScript

关注(0)|答案(4)|浏览(146)

尝试从父级调用childComponent方法时出现错误

子TS.

export class ChildComponent implements OnInit {
     ChildMethod(){
       console.log('test');
     }
     constructor() { }
   }

父T

@ViewChild(ChildComponent , {static : false}) child!:ChildComponent ;
  
   CallChild(){
       this.child.ChildMethod();
     }

当我调用CallChild时我得到这个错误不能读取在GpmainComponent的未定义的属性（阅读'ChildMethod'）.CallChild（gpmain.component.ts：39：16）

4条答案

尝试在构造函数中声明子组件。
在父文件中.ts：

constructor(private child: ChildComponent) {}

CallChild() {
  this.child.ChildMethod();
}

这与static: false和时序有关。
当设置为false时，ViewChild查询将在更改检测运行之后、ngAfterViewInit之前解析。这意味着，例如，如果您尝试在ngOnInit中调用，则child将是未定义的。
您有两个选项：

感谢您花时间回答这个问题。我在ngAfterViewInit中尝试了true和false。
我在从父组件上的按钮初始化两个组件之后调用子组件。

<button (click)="CallChild()" class="btn btn-link">load Child</button> 

CallChild(){
    this.child.ChildMethod();
  }

这可能取决于您何时调用CallChild。
如果在视图呈现之前调用它，则this.child将为undefined，从而导致错误。

由于您是通过单击按钮来启动子函数调用的，您是否尝试过使用模板变量，并在父模板的(click)声明中直接调用它？

<my-child #ChildComp></my-child>

<button (click)="ChildComp.childFunc()" class="btn btn-link">
  Load Child
</button>