Не удается получить доступ к функции дочернего компонента из родительского компонента - PullRequest
Новая
       10

Не удается получить доступ к функции дочернего компонента из родительского компонента

0 голосов
/ 05 февраля 2019

У меня есть отдельный 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: Мой дочерний компонент из другого модуля

вот мой пример рабочего кода

В моем коде, если селектор дочернего компонента добавлен в html родительского компонента, тогда я получаю желаемый вывод, но мне нужно получить доступ к функции дочернего компонента без добавления селектора дочернего компонента в родительском компоненте

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Попробуйте дать ссылку на ребенка: 

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

, а затем в .ts: 

@ViewChild('child') child;

тогда вы можете назвать его как: 

this.child.mychildFunction();
0 голосов
/ 05 февраля 2019

в родительском компоненте сделайте это: 

@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>
...