Question

我有一个单独的assetAnnotationComponent（child）来管理注释功能。从我的主要组件调用该组件以通过鼠标事件在图像上进行注释。访问 assetAnnotationComponent 时出现以下错误对象

ERROR TypeError: Cannot read property 'mychildFunction' of undefined

我尝试在父组件中执行以下操作 @ViewChild(AssetAnnotationComponent) assetAnnotationComponent

这是父组件HTML

<div class="modal-body">
  <app-asset-annotation></app-asset-annotation>
  </div>

这是父组件打字稿

import { AssetAnnotationComponent } from './asset-annotation.component';

export class ParentComponent{
@ViewChild(AssetAnnotationComponent) assetAnnotationComponent;

ngAfterViewInit(){
this.assetAnnotationComponent.mychildFunction();
}
}

我的孩子部分

export class AssetAnnotationComponent{

mychildFunction()
{
console.log("success");
}

}

我希望在控制台中打印“成功”，以便我可以访问子组件的功能。谢谢

编辑：正如评论中所建议的，以及从被建议重复的问题中，我已经尝试过了。我正在使用ngViewAfterInit调用我的函数，因此视图已完全加载。编辑2：我的子组件来自不同的模块

编辑2：我的子组件来自其他模块

here is my sample working code

在我的代码中，如果将子组件的选择器添加到父组件html中，那么我会得到所需的输出，但是我需要访问子组件功能而不在父组件中添加子组件的选择器 < / p>

Answer 1

在您的父组件中执行以下操作：

@ViewChildren('myChild') assetAnnotationComponent: QueryList<AssetAnnotationComponent>; 
public currentChildComponent: AssetAnnotationComponent;

    ngAfterViewInit(): void {
          this.assetAnnotationComponent.changes.subscribe(data => {
              this.currentChildComponent= data._results[0];
              this.currentChildComponent.mychildFunction();
          });
    }

父HTML为此：

<div class="modal-body">
  <app-asset-annotation #myChild></app-asset-annotation>  //notice the template variable
</div>

Answer 2

尝试引用孩子的名字：

<app-asset-annotation #child></app-asset-annotation>

，然后在.ts中：

@ViewChild('child') child;

然后您可以将其称为：

this.child.mychildFunction();

无法从父组件访问子组件功能

2 个答案: