AngularJs Child Reference erlangen

Downloads:

Child Component erstellen

Es wird von einer einfachen AngularJs Component ausgegangen.
Wichtig ist hier die Funktion onRef, welche mittels Function Binding in die Component gereicht wird.
Diese wird im $onInit aufgerufen und setzt in die temporäre Objekt Property ref den Context des ChildCtrl this.
Das Template soll nur zu Demonstrationszwecken anzeigen, dass die Component gerendert wird.

class ChildCtrl {
  $onInit() {
    this.onRef({ ref: this });
  }

  test(){
    alert('test function from child component');
  }
}

export default {
  bindings: {
    onRef: '&',
  },
  template: '<div>hello child</div>',
  controller: ChildCtrl
}

Child Component Module erstellen

Anschließend wird noch ein Child Module erstellt, sodass sich die Child Component mittels Module importieren lässt.

import * as angular from 'angular';
import childComponent from './child.component';

export default angular.module('child', [])
    .component('childComponent', childComponent)
    .name;

Parent Referenz erstellen

Um nun die Referenz in der Parent Component zu erhalten, wird zur Übersicht eine Property childComponent erstellt.

Child Component integrieren

Die Child Component kann nach dem Importieren in ein AngularJs Module wie folgt in ein Template der Parent Component integriert werden:

<child-component on-ref="$ctrl.childComponent = ref"></child-component>

Hierbei wird on-ref als Output genutzt.
ref ist der Wert, welcher durch den Callback zurückgeliefert wird und anschließend in die zuvor erstellte Property childComponent geschrieben wird.
Ab diesem Zeitpunkt enthält die Property childComponent den Context von ChildCtrl.
Somit kann nun auch auf Properties und Funktionen der Child Component im Parent zugegriffen werden.