AngularJS
Komponenten
Suche…
Parameter
| Parameter | Einzelheiten |
|---|---|
| = | Für die bidirektionale Datenbindung. Das bedeutet, wenn Sie diese Variable in Ihrem Komponentenbereich aktualisieren, wirkt sich die Änderung auf den übergeordneten Bereich aus. |
| < | Einwegbindungen, wenn wir einen Wert nur aus einem übergeordneten Bereich lesen und nicht aktualisieren möchten. |
| @ | String-Parameter |
| & | Für Rückrufe, falls Ihre Komponente etwas in den übergeordneten Bereich ausgeben muss. |
| - | - |
| Lebenszyklus-Hooks | Details (erfordert angle.version> = 1.5.3) |
| $ onInit () | Wird auf jedem Controller aufgerufen, nachdem alle Controller eines Elements erstellt wurden und deren Bindungen initialisiert wurden. Hier können Sie den Initialisierungscode für Ihren Controller eingeben. |
| $ onChanges (changesObj) | Wird aufgerufen, wenn Einwegbindungen aktualisiert werden. Die changesObj ist ein Hash, dessen Schlüssel die Namen der gebundenen Eigenschaften sind, die sich geändert haben, und die Werte sind ein Objekt der Form { currentValue, previousValue, isFirstChange() } . |
| $ onDestroy () | Wird von einem Controller aufgerufen, wenn der enthaltene Bereich zerstört wird. Verwenden Sie diesen Haken, um externe Ressourcen, Uhren und Event-Handler freizugeben. |
| $ postLink () | Wird aufgerufen, nachdem das Element dieses Controllers und seine untergeordneten Elemente verknüpft wurden. Dieser Hook kann als analog zu den Hooks ngAfterViewInit und ngAfterContentInit in Angular 2 betrachtet werden. |
| $ doCheck () | Wird in jeder Runde des Digest-Zyklus aufgerufen. Bietet die Möglichkeit, Änderungen zu erkennen und darauf zu reagieren. Alle Aktionen, die Sie als Reaktion auf die erkannten Änderungen durchführen möchten, müssen von diesem Hook aus aufgerufen werden. Die Implementierung hat keine Auswirkungen auf den Aufruf von $ onChanges. |
Bemerkungen
Komponente ist eine spezielle Art von Direktive, die eine einfachere Konfiguration verwendet, die für eine komponentenbasierte Anwendungsstruktur geeignet ist. Komponenten wurden in Angular 1.5 eingeführt. Die Beispiele in diesem Abschnitt funktionieren nicht mit älteren AngularJS-Versionen.
Ein vollständiges Entwicklerhandbuch für Komponenten ist verfügbar unter https://docs.angularjs.org/guide/component
Grundkomponenten und Lebenszyklus-Hooks
Was ist eine Komponente?
- Eine Komponente ist im Grunde eine Direktive, die eine einfachere Konfiguration verwendet und sich für eine komponentenbasierte Architektur eignet. Angular 2 ist dies alles. Stellen Sie sich eine Komponente als Widget vor: Ein Stück HTML-Code, den Sie an verschiedenen Stellen in Ihrer Webanwendung wiederverwenden können.
Komponente
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
Markup
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Verwenden externer Daten in Component:
Wir könnten einen Parameter hinzufügen, um unserer Komponente einen Namen zu übergeben, der wie folgt verwendet wird:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
Markup
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Controller in Komponenten verwenden
Sehen wir uns an, wie Sie einen Controller hinzufügen.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
Markup
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
Parameter, die an die Komponente übergeben werden, sind im Bereich des Controllers verfügbar, kurz bevor die $onInit Funktion von Angular aufgerufen wird. Betrachten Sie dieses Beispiel:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
In der Vorlage von oben würde dies "Hallo John, ich bin MacJohn!"
Beachten Sie, dass $ctrl der Angular-Standardwert für controllerAs wenn kein Wert angegeben wird.
Verwenden von "erfordern" als Objekt
In einigen Fällen müssen Sie möglicherweise auf Daten von einer übergeordneten Komponente in Ihrer Komponente zugreifen.
Dies kann erreicht werden, indem festgelegt wird, dass für unsere Komponente die übergeordnete Komponente erforderlich ist. Die Anforderung gibt uns einen Hinweis auf die erforderliche Komponentensteuerung, die dann in unserer Steuerung verwendet werden kann, wie im folgenden Beispiel gezeigt:
Beachten Sie, dass die erforderlichen Controller garantiert erst nach dem Hook $ onInit bereit sind.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
Beachten Sie jedoch, dass dadurch eine enge Verbindung zwischen dem Kind und dem Elternteil entsteht.
Komponenten in Winkel JS
Die Komponenten in angleJS können als benutzerdefinierte Direktive dargestellt werden (<html> dies in einer HTML-Direktive, und so etwas wird eine benutzerdefinierte Direktive <ANYTHING> sein). Eine Komponente enthält eine Ansicht und einen Controller. Controller enthält die Geschäftslogik, die mit einer Ansicht verbunden ist, die der Benutzer sieht. Die Komponente unterscheidet sich von einer Winkeldirektive, da sie weniger Konfiguration enthält. Eine Winkelkomponente kann so definiert werden.
angular.module("myApp",[]).component("customer", {})
Komponenten werden auf den Winkelmodulen definiert. Sie enthalten zwei Argumente: Einer ist der Name der Komponente und der zweite ist ein Objekt, das ein Schlüsselwertpaar enthält, das definiert, welche Ansicht und welcher Controller auf diese Weise verwendet wird.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" ist der Name der App, die wir erstellen, und der Kunde ist der Name unserer Komponente. Nun, um es in der Haupt-HTML-Datei aufzurufen, werden wir es einfach so setzen
<customer></customer>
Jetzt wird diese Direktive durch die von Ihnen angegebene Sicht und die Geschäftslogik, die Sie in Ihre Steuerung geschrieben haben, ersetzt.
HINWEIS: Denken Sie daran, dass die Komponente ein Objekt als zweites Argument übernimmt, während die Direktive eine Factory-Funktion als Argument verwendet.