Ένα στοιχείο είναι ένα από τα πιο σημαντικά δομικά στοιχεία μιας εφαρμογής Angular. Τα στοιχεία είναι επαναχρησιμοποιήσιμα κομμάτια κώδικα που αποτελούν ορισμένες ενότητες του ιστότοπού σας.
Τα παραδείγματα στοιχείων που μπορείτε να δημιουργήσετε περιλαμβάνουν μικρότερα στοιχεία διεπαφής χρήστη, όπως κουμπιά ή κάρτες. Μπορούν επίσης να περιλαμβάνουν μεγαλύτερα στοιχεία διεπαφής χρήστη, όπως πλαϊνές γραμμές, γραμμές πλοήγησης ή ολόκληρες σελίδες.
Χρήση εξαρτημάτων στο Angular
Όταν δημιουργείτε στοιχεία σε μια εφαρμογή Angular, μπορείτε να τα χρησιμοποιήσετε σε άλλα στοιχεία. Για παράδειγμα, θα μπορούσατε να δημιουργήσετε ένα στοιχείο για ένα μεγάλο στοιχείο κάρτας διεπαφής χρήστη. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο ως κανονική ετικέτα HTML, οπουδήποτε θέλετε:
<app-new-component></app-new-component>Δεδομένου ότι τα στοιχεία είναι επαναχρησιμοποιήσιμα bits κώδικα, μπορείτε επίσης να μεταβιβάσετε μεταβλητές έτσι ώστε τα δεδομένα για κάθε παρουσία να είναι διαφορετικά. Μπορείτε επίσης να δημιουργήσετε στοιχεία για σελίδες και να δρομολογήσετε σε αυτές ανάλογα χρησιμοποιώντας το
app-routing.module.ts αρχείο.Μπορείτε να σχεδιάσετε τα στοιχεία σας με βάση τη δομή της εφαρμογής σας και πόσο θέλετε να διαχωρίσετε τη λειτουργικότητά σας.
Πώς να δημιουργήσετε ένα στοιχείο
Μπορείτε να χρησιμοποιήσετε το ngδημιουργία εντολής για να δημιουργήσετε ένα νέο στοιχείο.
- Δημιούργησε ένα νέο Γωνιακή εφαρμογή χρησιμοποιώντας καινούργιο ή ανοίξτε ένα υπάρχον.
- Ανοίξτε τη γραμμή εντολών ή το τερματικό. Εναλλακτικά, εάν έχετε την εφαρμογή Angular ανοιχτή σε ένα IDE όπως ο κώδικας του Visual Studio, μπορείτε να χρησιμοποιήσετε το ενσωματωμένο τερματικό.
- Στο τερματικό, μεταβείτε στη θέση του ριζικού φακέλου του έργου. Για παράδειγμα:
CD C:\Users\Sharl\Desktop\Angular-Application - Εκτελέστε το ng παράγουν συστατικό εντολή, ακολουθούμενη από το όνομα του νέου στοιχείου:
ng δημιουργία κάρτας UI συστατικού - Το νέο στοιχείο θα δημιουργηθεί σε έναν νέο φάκελο, μέσα στο src/app Ευρετήριο.
Πώς να προσθέσετε περιεχόμενο στο στοιχείο Angular
Το Angular δημιουργεί κάθε στοιχείο με ένα αρχείο HTML, CSS, TypeScript και Testing Specification.
- ο αρχείο HTML αποθηκεύει το περιεχόμενο HTML του στοιχείου.
- ο αρχείο CSS αποθηκεύει το στυλ του εξαρτήματος.
- ο Αρχείο Προδιαγραφών δοκιμής (spec.ts). αποθηκεύει τυχόν δοκιμές μονάδας για το εξάρτημα.
- ο Αρχείο TypeScript αποθηκεύει τη λογική και τη λειτουργικότητα που ορίζει το στοιχείο.
Προσθέστε κάποιο περιεχόμενο στο στοιχείο προσαρμοσμένης κάρτας UI.
- Ανοιξε src/app/ui-card/ui-card.component.htmlκαι ενημερώστε το HTML του στοιχείου. Βεβαιωθείτε ότι έχετε μια εικόνα που χρησιμοποιεί το ίδιο όνομα σε ένα φάκελο με το όνομα src/στοιχεία/εικόνες στην Angular εφαρμογή σας. Αντικαταστήστε το περιεχόμενο του ui-card.component.html με τα εξής:
<div class="κάρτα">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div class="δοχείο">
<h4 class="τίτλος"> Γαλάζια Όρη </h4>
<Π> NSW, Αυστραλία </Π>
</div>
</div> - Ανοιξε ui-card.component.cssκαι προσθέστε περιεχόμενο CSS στο στοιχείο:
.κάρτα {
κουτί-σκιά: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
πλάτος: 400px;
υλικό παραγεμίσματος: 8px;
περιθώριο: 24px;
χρώμα του φόντου: λευκός καπνός;
γραμματοσειρά-οικογένεια: Σανς σέριφ;
}.κάρταimg {
μέγιστο πλάτος: 400px;
}.τίτλος {
padding-top: 16px;
}.δοχείο {
υλικό παραγεμίσματος: 2px 16px;
} - ο ui-card.component.ts Το αρχείο περιέχει ήδη μια κλάση για το νέο στοιχείο όπου μπορείτε να προσθέσετε νέες συναρτήσεις, λογική και λειτουργικότητα. Θα πρέπει να μοιάζει με αυτό:
εξαγωγήτάξη UiCardComponent υλοποιεί OnInit {
κατασκευαστής() { }
ngOnInit(): κενός {
// Προσθέστε κάποια λογική κώδικα εδώ
}
// Ή, προσθέστε τη λογική και τη λειτουργικότητά σας σε νέες συναρτήσεις
}
Πώς να χρησιμοποιήσετε το στοιχείο σε HTML άλλου στοιχείου
Μέσα ui-card.component.ts, υπάρχουν τρία χαρακτηριστικά: επιλογέας, templateUrl και styleUrl. Το templateUrl αναφέρεται στο HTML του στοιχείου (και επομένως σε συνδέσμους προς το αρχείο HTML). Το χαρακτηριστικό styleUrls αναφέρεται στο CSS του στοιχείου και συνδέεται με το αρχείο CSS.
@Συστατικό({
επιλογέας: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Όταν χρησιμοποιείτε το στοιχείο της κάρτας διεπαφής χρήστη σε άλλο στοιχείο, θα χρησιμοποιείτε το όνομα του επιλογέα "app-ui-card".
- Πρώτα, προσθέστε κάποιο περιεχόμενο στην ιστοσελίδα σας. Ανοιξε src/app/app.component.html και προσθέστε μια γραμμή πλοήγησης:
<div class="navbar-header">
<μια τάξη="nav-τίτλος"><σι> Γραμμή πλοήγησης Ιστού </σι></ένα>
</div> - Προσθέστε κάποιο στυλ στη γραμμή πλοήγησής σας src/app/app.component.css:
.navbar-header {
χρώμα του φόντου: #07393C;
υλικό παραγεμίσματος: 30px 50px;
απεικόνιση: καλώδιο;
στοίχιση-στοιχεία: κέντρο;
γραμματοσειρά-οικογένεια: Σανς σέριφ;
}.nav-title {
κείμενο-διακόσμηση: κανένας;
χρώμα: άσπρο;
μέγεθος γραμματοσειράς: 16pt;
} - Κάτω από τη γραμμή πλοήγησης μέσα app.component.html, προσθέστε μια νέα κάρτα διεπαφής χρήστη. Χρησιμοποιήστε το όνομα επιλογέα "app-ui-card" ως ετικέτα HTML:
<app-ui-κάρτα></app-ui-card> - Μπορείτε επίσης να χρησιμοποιήσετε ξανά το στοιχείο συμπεριλαμβάνοντας την ετικέτα πολλές φορές. Για να το κάνετε αυτό, αντικαταστήστε την παραπάνω γραμμή για να χρησιμοποιήσετε πολλές ετικέτες HTML κάρτας εφαρμογής-ui:
<div style="οθόνη: flex">
<app-ui-κάρτα></app-ui-card>
<app-ui-κάρτα></app-ui-card>
<app-ui-κάρτα></app-ui-card>
</div> - Εκτελέστε την εφαρμογή Angular από το τερματικό χρησιμοποιώντας το ng σερβίρετε εντολή και ανοίξτε τον ιστότοπό σας σε ένα πρόγραμμα περιήγησης ιστού.
Τρόπος μεταβίβασης παραμέτρων εισόδου στο στοιχείο
Δεδομένου ότι το στοιχείο είναι επαναχρησιμοποιήσιμο, υπάρχουν χαρακτηριστικά που μπορεί να θέλετε να αλλάζετε κάθε φορά που το χρησιμοποιείτε. Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε παραμέτρους εισόδου.
- Προσθήκη Εισαγωγή στη λίστα των εισαγωγών στην κορυφή του ui-card.component.ts:
εισαγωγή { Component, Input, OnInit } από '@γωνιώδης/core'; - Στη συνέχεια, προσθέστε δύο μεταβλητές εισόδου μέσα στο Συστατικό UICard τάξη. Αυτά θα σας επιτρέψουν να αλλάξετε το όνομα τοποθεσίας και την εικόνα που εμφανίζεται στην κάρτα. Συμπληρώστε το ngOnInit λειτουργεί όπως φαίνεται, για να δημιουργήσετε τη διαδρομή προς την εικόνα ή να χρησιμοποιήσετε μια προεπιλεγμένη τιμή:
εξαγωγήτάξη UiCardComponent υλοποιεί OnInit {
@Εισαγωγή() όνομα τοποθεσίας: σειρά;
@Εισαγωγή() Όνομα εικόνας: σειρά;κατασκευαστής() { }
ngOnInit(): κενός {
αν (Αυτό.imageName) {
Αυτό.imageName = "./assets/images/" + Αυτό.imageName;
} αλλού {
Αυτό.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Σε ui-card.component.html, αλλάξτε την κωδικοποιημένη τιμή της Επικεφαλίδας 4 "Blue Mountains" για να χρησιμοποιήσετε τη μεταβλητή εισαγωγής "locationName". Αλλάξτε επίσης το σκληρό κωδικοποιημένο src χαρακτηριστικό στην ετικέτα εικόνας για να χρησιμοποιήσετε τη μεταβλητή εισαγωγής "imageName":
<div class="κάρτα">
<img src="{{imageName}}" alt="Avatar">
<div class="δοχείο">
<h4 class="τίτλος">{{όνομα τοποθεσίας? όνομα τοποθεσίας: 'Γαλάζια Όρη'}}</h4>
<Π>NSW, Αυστραλία</Π>
</div>
</div> - Σε app.component.html, τροποποιήστε τις ετικέτες "app-ui-card" ώστε να περιλαμβάνουν τις εισόδους "locationName" και "imageName". Για κάθε στοιχείο κάρτας διεπαφής χρήστη, εισαγάγετε διαφορετική τιμή. Βεβαιωθείτε ότι τα αρχεία εικόνων υπάρχουν στον φάκελο στοιχείων/εικόνων της Angular εφαρμογής σας.
<div style="οθόνη: flex">
<app-ui-card [locationName]="'Γαλάζια Όρη'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Σίδνεϊ'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Νιούκαστλ'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Εκτελέστε την εφαρμογή Angular από το τερματικό χρησιμοποιώντας το ng σερβίρετε εντολή και ανοίξτε τον ιστότοπό σας σε ένα πρόγραμμα περιήγησης ιστού.
Μπορεί να δείτε ένα σφάλμα σε αυτό το σημείο σχετικά με αυτές τις ιδιότητες που δεν έχουν αρχικοποιητή. Αν ναι, απλώς προσθέστε ή ορίστε "strictPropertyInitialization": false στο δικό σου tsconfig.json.
Πώς να δρομολογήσετε σε ένα νέο στοιχείο
Εάν το στοιχείο σας αντιπροσωπεύει ένα μεγάλο μέρος του ιστότοπού σας, όπως μια νέα σελίδα, τότε μπορείτε επίσης να δρομολογήσετε σε αυτό το στοιχείο.
- Ανοιξε app-routing.module.ts. Εισαγάγετε το στοιχείο κάρτας διεπαφής χρήστη στο επάνω μέρος του αρχείου:
εισαγωγή { UiCardComponent } από './ui-card/ui-card.component'; - Προσθέστε μια διαδρομή δρομολόγησης στον πίνακα διαδρομών:
συνθ διαδρομές: Διαδρομές = [
//... Οποιεσδήποτε άλλες διαδρομές μπορεί να χρειαστείτε...
{ path: 'uicard', component: UiCardComponent },
] - Αντικαταστήστε όλο το τρέχον περιεχόμενο στο app.component.html να περιλαμβάνει μόνο τη γραμμή πλοήγησης και μια ετικέτα HTML εξόδου δρομολογητή. Η έξοδος δρομολογητή σάς επιτρέπει να δρομολογείτε μεταξύ σελίδων. Προσθέστε έναν υπερσύνδεσμο στη γραμμή πλοήγησης, με το χαρακτηριστικό href να ταιριάζει με τη διαδρομή στον πίνακα διαδρομών:
<div class="navbar-header">
<μια τάξη="nav-τίτλος"><σι> Γραμμή πλοήγησης Ιστού </σι></ένα>
<μια τάξη="nav-a-link" href="/uicard"><σι> Κάρτα UI </σι></ένα>
</div>
<ρούτερ-πρίζα></router-outlet> - Προσθέστε λίγο στυλ στον νέο σύνδεσμο της κάρτας διεπαφής χρήστη, στο app.component.css:
.nav-a-link {
κείμενο-διακόσμηση: κανένας;
χρώμα: #4b6569;
μέγεθος γραμματοσειράς: 14pt;
περιθώριο-αριστερά: 60px;
βάρος γραμματοσειράς: αναπτήρας;
} - Εκτελέστε την εφαρμογή Angular από το τερματικό χρησιμοποιώντας το ng σερβίρετε εντολή και ανοίξτε τον ιστότοπό σας σε ένα πρόγραμμα περιήγησης ιστού. Ο σύνδεσμος θα εμφανιστεί στη γραμμή πλοήγησης στην ιστοσελίδα.
- Σημειώστε τη διεύθυνση URL στο πρόγραμμα περιήγησής σας. Από προεπιλογή, είναι συνήθως http://localhost: 4200/. Όταν κάνετε κλικ στον σύνδεσμο της κάρτας διεπαφής χρήστη, η σελίδα θα δρομολογηθεί http://localhost: 4200/uicardκαι θα εμφανιστεί η κάρτα διεπαφής χρήστη.
Δημιουργία εξαρτημάτων στο Angular
Ένα συστατικό είναι ένα από τα κύρια δομικά στοιχεία του Angular. Τα στοιχεία σάς επιτρέπουν να χωρίσετε διαφορετικές ενότητες του ιστότοπού σας σε μικρότερα, επαναχρησιμοποιήσιμα μέρη. Μπορείτε να μετατρέψετε οτιδήποτε σε στοιχεία, όπως μικρότερα κουμπιά, κάρτες, μεγαλύτερες πλαϊνές γραμμές και γραμμές πλοήγησης.
Μπορείτε επίσης να χρησιμοποιήσετε μεταβλητές εισόδου για να μεταβιβάσετε δεδομένα σε διαφορετικές παρουσίες του στοιχείου. Και μπορείτε να δρομολογήσετε στο στοιχείο χρησιμοποιώντας διαδρομές URL.
Εάν αναπτύσσετε μια νέα εφαρμογή Angular, μπορεί να χρειαστεί να δημιουργήσετε μια γραμμή πλοήγησης ώστε οι χρήστες σας να πλοηγούνται στα στοιχεία σας. Έχοντας μια αποκριτική γραμμή πλοήγησης σάς επιτρέπει να την προβάλλετε σε διαφορετικές συσκευές, σε διαφορετικά μεγέθη οθόνης.