2017-08-30 18 views
2

Wie bewertet Angular diesen ziemlich komplexen Ausdruck?Wie bewertet Angular Ausdrücke?

Sicher ist es nicht eval verwenden, dann wie es analysiert und wertet es aus?

Könnte jemand mich in die richtige Richtung zeigen?

Ich betrachte ngIf ‚s Quellcode, aber scheint nicht interessant, etwas zu finden.

Es scheint wie zu der Zeit ngIf empfängt den Wert, wurde bereits von eckigen ausgewertet.

+0

Da dies eine generische Frage ist, denke ich in Bezug auf alle Templating-Engines, ich füge Angularjs hinzu und Winkel des Tags. – Milad

Antwort

0

Erstens:

Die *ngIf Richtlinie ist im Grunde eine Abkürzung für „umgeben mit <ng-template [ngIf]>

<div *ngIf="expr"></div> 


<ng-template [ngIf]="expr"> 
    <div></div> 
</ng-template> 

Also im Grunde ist es als Eingabebindungen der gleichen Bewertung läuft darauf hinaus. Sie können hier nach Informationen suchen:

https://github.com/angular/angular/blob/master/aio/content/guide/template-syntax.md

Beachten Sie, dass, wenn Schrägläufe Erkennung ändern, wird es prüfen, ob eine der Variablen geändert haben, und wenn es der Fall ist neu zu bewerten, ob die Komponente angezeigt werden soll/instanziiert oder nicht.

1

Wenn eckige Komponenten kompiliert werden, wird TypeScript (und im folgenden Schritt JavaScript) für alle Bindungen und alle Komponenten, Direktiven und Pipes generiert, die in Templates angewendet werden müssen. Dieses JavaScript wird dann nur vom Browser ausgeführt.

Dies ist einer der Hauptunterschiede zu AngularJS, wo HTML mit Angular Binding-Konstrukten zu dem vom Browser geladenen HTML hinzugefügt wird, dann analysiert Angular das DOM und wendet seine Logik an.

In Angular 2 und höher wird der HTML-Code nur zum DOM hinzugefügt, nachdem Komponentenvorlagen kompiliert wurden. Wenn Sie den HTML-Code in dem Browser devtools überprüfen, Angular-spezifische Bindungen fehlen (oder ersetzt, wenn sie einig nicht-Angular DOM-semantische enthalten)

Mit dem statischen Modul, dies geschieht, wenn der Winkel Anwendung von kompiliert der Entwickler (vor der Bereitstellung). Mit der dynamischen Modul Komponente Zusammenstellung kann auch zur Laufzeit geschehen. Aber es ist immer noch das gleiche. Vorlagen werden nur dem DOM nach Angular generierten JS-Code für sie hinzugefügt und ersetzt/entfernt Angular-spezifische Bindesyntax ..

+1

Ja, Sie sollten nur die generierte Javascript-Datei für diesen Code betrachten. –