AngularJS
Komponenter
Sök…
parametrar
| Parameter | detaljer |
|---|---|
| = | För att använda tvåvägsdatabindning. Detta innebär att om du uppdaterar den variabeln i ditt komponentområde kommer förändringen att återspeglas i överordnade omfång. |
| < | Envägsbindningar när vi bara vill läsa ett värde från en överordnad omfattning och inte uppdatera det. |
| @ | Strängparametrar. |
| & | För återuppringningar om din komponent behöver mata ut något till sitt överordnade omfång. |
| - | - |
| LifeCycle Hooks | Detaljer (kräver vinkel.version> = 1.5.3) |
| $ onInit () | Kallas på varje styrenhet efter att alla styrenheter på ett element har konstruerats och fått sina bindningar initialiserade. Det här är ett bra ställe att sätta initieringskod för din controller. |
| $ onChanges (changesObj) | Ringas varje gång envägsbindningar uppdateras. changesObj är en hash vars nycklar är namnen på de bundna egenskaperna som har ändrats, och värdena är ett objekt med formen { currentValue, previousValue, isFirstChange() } . |
| $ onDestroy () | Uppmanas till en controller när dess innehållande räckvidd förstörs. Använd denna krok för att släppa externa resurser, klockor och evenemangshanterare. |
| $ Postlink () | Kallas efter att denna controller-element och dess barn har länkats. Denna krok kan betraktas som analog med ngAfterViewInit och ngAfterContentInit krokarna i Angular 2. |
| $ doCheck () | Kallas på varje sväng av digerecykeln. Ger en möjlighet att upptäcka och agera på förändringar. Alla åtgärder som du vill vidta som svar på de ändringar som du upptäcker måste påkallas från denna krok; att implementera detta har ingen effekt på när $ onChanges anropas. |
Anmärkningar
Komponent är en speciell typ av direktiv som använder en enklare konfiguration som är lämplig för en komponentbaserad applikationsstruktur. Komponenter introducerades i Angular 1.5, exemplen i detta avsnitt fungerar inte med äldre AngularJS-versioner.
En komplett utvecklingsguide om komponenter finns tillgänglig på https://docs.angularjs.org/guide/component
Grundläggande komponenter och livscykelkrokar
Vad är en komponent?
- En komponent är i princip ett direktiv som använder en enklare konfiguration och som är lämplig för en komponentbaserad arkitektur, vilket är vad Angular 2 handlar om. Tänk på en komponent som en widget: En bit HTML-kod som du kan återanvända på flera olika platser i din webbapplikation.
Komponent
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
Markup
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Använda externa data i komponent:
Vi kan lägga till en parameter för att skicka ett namn till vår komponent, som skulle användas på följande sätt:
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>
Använda styrenheter i komponenter
Låt oss ta en titt på hur man lägger till en controller till den.
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>
Parametrar som skickas till komponenten finns tillgängliga i regulatorns omfattning strax innan dess $onInit funktion kallas av Angular. Tänk på detta exempel:
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;
}
}
});
I mallen ovanifrån skulle detta göra "Hej John, jag är MacJohn!".
Observera att $ctrl är Angular-standardvärdet för controllerAs om det inte anges något.
Använda "kräva" som ett objekt
I vissa fall kan du behöva komma åt data från en överordnad komponent i din komponent.
Detta kan uppnås genom att specificera att vår komponent kräver den överordnade komponenten, kravet kommer att ge oss referens till den nödvändiga komponentkontrollern, som sedan kan användas i vår styrenhet som visas i exemplet nedan:
Lägg märke till att nödvändiga styrenheter garanteras vara klara först efter $ onInit-kroken.
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();
}
}
});
Tänk dock på att detta skapar en tät koppling mellan barnet och föräldern.
Komponenter i vinkel JS
Komponenterna i angularJS kan visualiseras som ett anpassat direktiv (<html> detta i ett HTML-direktiv, och något liknande detta kommer att vara ett anpassat direktiv <ANTHETING>). En komponent innehåller en vy och en kontroller. Controller innehåller affärslogiken som är bunden med en vy som användaren ser. Komponenten skiljer sig från ett vinkeldirektiv eftersom den innehåller mindre konfiguration. En vinkelkomponent kan definieras på detta sätt.
angular.module("myApp",[]).component("customer", {})
Komponenter definieras på vinkelmodulerna. De innehåller två argument, ett är komponentens namn och ett andra är ett objekt som innehåller nyckelvärdenspar, som definierar vilken vy och vilken kontroller den ska använda så här.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" är namnet på appen vi bygger och kund är namnet på vår komponent. Nu när vi kallar den i huvudsakliga html-filer kommer vi bara att sätta den så här
<customer></customer>
Nu kommer detta direktiv att ersättas av den vy du har angett och den affärslogik du har skrivit i din controller.
OBS: Kom ihåg att komponenten tar ett objekt som andra argument medan direktivet tar en fabriksfunktion som argument.
