$postLink

Nach dem Aufruf des $onInit-Hooks ist der $postLink-Hook an der Reihe. Der $postLink-Hook ist vergleichbar mit der post-link-Funktion einer Direktive und genau so wie die post-link-Funktion kann dieser benutzt werden, um das DOM zu manipulieren. Wir müssen also eine Komponente nicht mehr als Direktive definieren, wenn wir den DOM manipulieren möchten.

Der Controller einer Komponente konnte schon immer Zugriff auf das DOM-Element bekommen und zwar über Dependency Injection und $element. Allerdings war es nicht möglich genau zu wissen, wann es sicher war das DOM zu manipulieren. Wir konnten also nicht wissen, wann Angular mit dem Kompilieren und Link fertig war. Mit dem $postLink-Hook können wir das DOM der Komponente zum richtigen Zeitpunkt manipulieren, da dieser Hook erst nach dem Kompilieren und Linken der Komponente und Unterkomponenten aufgerufen wird. Allerdings müssen wir beachten, dass Unterkomponente, die die templateUrl-Eigenschaft nutzten erst nach dem $postLink-Aufruf kompiliert und gelinkt werden, da diese asynchron geladen werden. Hier ein simples Beispiel.

function controllerFn($element) {
  this.$postLink = function() {
    $element.append('<p>Test</p>');
  };
}

var component = {
  template: '<div></div>',
  controller: controllerFn
};

angular.module('app', [])
    .component('myApp', component);

Plunker Link

DOM-Manipulation im Controller

Es war schon immer ein Best Practise DOM-Manipulation in Controllers zu vermeiden. Allerdings gilt dies für Controllers die wir mittels ng-controller definieren. Der Controller einer Direktive bzw. Komponente darf durchaus das eigene DOM manipulieren und mit Hilfe des $postLink-Hooks können wir auch genau wissen, wann es sicher ist etwas im DOM zu verändern.

$onInit und $postLink Aufrufreihenfolge

Im Gegensatz zu dem $onInit-Hook, wird der $postLink-Hook von innen nach außen aufgerufen. Also erst wird der Hook für alle Child-Komponenten aufgerufen und danach für die Überkomponenten. Hier ein kleines Beispiel mit einer Komponente und einer Unterkomponente, das die Aufrufreihenfolge veranschaulicht.

function parentCtrl() {
  this.$onInit = function() {
    console.log('parent init');
  }

  this.$postLink = function() {
    console.log('parent post link');
  }
}

var parentComponent = {
  template: '<child></child>',
  controller: parentCtrl
};

function childCtrl() {
  this.$onInit = function() {
    console.log('child init');
  }

  this.$postLink = function() {
    console.log('child post link');
  }
}

var childComponent = {
  template: '<p>Child</p>',
  controller: childCtrl
};

angular.module('app', [])
    .component('myApp', parentComponent)
    .component('child', childComponent);

Plunker Link

Aufrufreihenfolge:

• $onInit im parentCtrl
• $onInit im childCtrl
• $postLink im childCtrl
• $postLink im parentCtrl

Fazit

Der $postLink-Hook ist der ideale Ort, um DOM-Manipulationen in einer Komponente durchzuführen. Seit es diesen Hook gibt sind wir nicht mehr gezwungen eine Komponente als Direktive zu implementieren nur, um das DOM zu verändern.