Heim  >  Artikel  >  Web-Frontend  >  Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen

Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen

青灯夜游
青灯夜游nach vorne
2021-05-19 10:08:012839Durchsuche

In diesem Artikel werden Ihnen die Funktionen preLink und postLink im Befehl angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen

【Verwandte Empfehlung: „Angular Tutorial“】

Die Anweisungsvorlagenoption hat zwei Felder: Kompilieren und Verknüpfen. Es besteht die folgende Beziehung zwischen den beiden:

  • Wenn das Kompilierungsfeld vorhanden ist, ist der Link Wird das Feld ignoriert, wird der Rückgabewert der Kompilierungsfunktion als Linkfeld verwendet.
  • Wenn die Kompilierung nicht vorhanden ist und das Linkfeld vorhanden ist, angularDadurchdirective.compile = valueFn(directive.link);Umschließen Sie eine Ebene und verwenden Sie das benutzerdefinierte Linkfeld. angular通过这样directive.compile = valueFn(directive.link);包装一层,使用用户定义的link字段。

而link分为preLink和postLink两个阶段,从link字段或者compile函数的返回值来看:

  • 如果是函数,那么这样的link,会被认为是postLink。
  • 如果是对象,那么link.pre作为preLink函数,link.post作为postLink函数。
app.directive('myDirective', function () {
  return {
      compile: function () {
          return {
              pre: function () {
                  console.log('preLink');
              },
              post: function () {
                  console.log('postLink');
              }
          }
      }
  }
});

我们的指令工厂返回的是一个函数,那么angular通过这样的包装  directive = { compile: valueFn(directive) },即该函数将作为指令对象的postLink函数,像这样:

app.directive('myDirective', function () {
  return function () {
    console.log('postLink');
  }
});

angular编译链接指令的顺序

为了看清angular编译链接指令的顺序,用以下代码输出日志的方式来说明:  

<body ng-app="myApp">
    <A a1>
        <B b1 b2></B>
        <C>
            <E e1></E>
            <F>
              <G></G>
            </F>
        </C>
        <D d1></D>
    </A>
</body>
 
var app = angular.module(&#39;myApp&#39;, []);
var names = [&#39;a1&#39;, &#39;b1&#39;, &#39;b2&#39;, &#39;e1&#39;, &#39;d1&#39;];
 
names.forEach(function (name) {
  app.directive(name, function () {
    return {
        compile: function () {
             console.log(name + &#39; compile&#39;);
            return {
                pre: function () {
                    console.log(name + &#39; preLink&#39;);
                },
                post: function () {
                    console.log(name + &#39; postLink&#39;);
                }
            };
        }
    };
  });
});

输出:

a1 compile
b1 compile
b2 compile
e1 compile
d1 compile
a1 preLink
b1 preLink
b2 preLink
b2 postLink
b1 postLink
e1 preLink
e1 postLink
d1 preLink
d1 postLink
a1 postLink

可以看出:

  • 所有的指令都是先compile,然后preLink,然后postLink。

  • 节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。

  • 节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定

  • Der Link ist in zwei Phasen unterteilt: preLink und postLink. Gemessen am Linkfeld oder dem Rückgabewert der Kompilierungsfunktion:

  • Wenn es sich um eine Funktion handelt, wird ein solcher Link als postLink betrachtet.

  • Wenn es sich um ein Objekt handelt, dient link.pre als preLink-Funktion und link.post als postLink-Funktion.


    <body ng-app="myApp">
        <my-parent></my-parent>
    </body>
     
    var app = angular.module(&#39;myApp&#39;, []);
     
    app.directive(&#39;myParent&#39;, function () {
        return {
            restrict: &#39;EA&#39;,
            template: &#39;<div>{{greeting}}{{name}}&#39;+
            &#39;<my-child></my-child>&#39;+
            &#39;</div>&#39;,
            link: function(scope,elem,attr){
                scope.name = &#39;Lovesueee&#39;;
                scope.greeting = &#39;Hey, I am &#39;;
            }
        };
    });
    app.directive(&#39;myChild&#39;, function () {
        return {
            restrict: &#39;EA&#39;,
            template: &#39;<div>{{says}}</div>&#39;,
            link: function(scope,elem,attr){
                scope.says = &#39;Hey, I am child, and my parent is &#39; + scope.name;
            }
        };
    });

    Unsere Anweisungsfabrik gibt eine Funktion zurück und umschließt sie dann wie folgt: directive = { compile: valueFn(directive) } , das heißt, diese Funktion wird wie folgt als PostLink-Funktion des Anweisungsobjekts verwendet:
  • Hey, I am Lovesueee
    Hey, I am child, and my parent is undefined

    Die Reihenfolge der Winkelkompilierungs- und Linkanweisungen

Damit Sehen Sie sich deutlich die Reihenfolge der Winkelkompilierungs- und Linkanweisungen an. Die Reihenfolge wird durch das folgende Code-Ausgabeprotokoll erklärt:

rrreee

Ausgabe:

rrreee

Es ist zu sehen:

    Alle Anweisungen werden zuerst kompiliert, dann preLink, dann postLink.

    🎜🎜Der preLink der Knotenanweisung liegt vor den preLink- und postLink-Anweisungen aller untergeordneten Knoten, sodass Sie hier im Allgemeinen bestimmte Informationen über den Bereich an die untergeordneten Knoten weitergeben können. 🎜🎜🎜🎜🎜Der postLink der Knotenanweisung erfolgt, nachdem alle untergeordneten Knotenanweisungen preLink und postLink abgeschlossen sind. Dies bedeutet, dass der untergeordnete Knoten postLink abgeschlossen ist, wenn der übergeordnete Knotenbefehl postLink ausführt. line -height:1.8; Vertical-align:top; padding:0.2em 0px!important; ; color:rgb(234,23,23)!important">Der Sub-DOM-Baum wurde stabilisiert, daher befinden sich die meisten unserer DOM-Operationen und der Zugriff auf untergeordnete Knoten in diesem Stadium. 🎜🎜🎜🎜🎜Der Prozess der Linkanweisung ist eigentlich ein Tiefendurchlaufprozess, und die Ausführung von postLink ist eigentlich ein Backtracking-Prozess. 🎜🎜🎜🎜🎜Es können mehrere Anweisungen auf dem Knoten vorhanden sein, die beim Sammeln in einer bestimmten Reihenfolge angeordnet werden (sortiert nach Priorität). Bei der Ausführung wird preLinks in Vorwärtsreihenfolge ausgeführt, während PostLinks in umgekehrter Reihenfolge ausgeführt wird. 🎜🎜🎜🎜🎜Nachdem Sie dies verstanden haben, müssen Sie sich vor einigen leicht zu übersehenden Fallen in Acht nehmen. 🎜rrreee🎜Die Ausgabe des Ergebnis-Unterbefehls ist undefiniert🎜rrreee🎜 Wie oben dargestellt ist der Link der myParent-Anweisung eine PostLink-Funktion, und diese Funktion wird ausgeführt, nachdem preLink und postLink der myChild-Anweisung ausgeführt wurden. Also Scope.name = undefiniert. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen