Τι είναι τα templateUrl και τα styleUrl στο Angular;

Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Χρησιμοποιώντας το Angular, μπορείτε να διαχωρίσετε σελίδες, διαλόγους ή άλλες ενότητες της εφαρμογής σας σε στοιχεία. Τα στοιχεία σε μια εφαρμογή Angular αποτελούνται κυρίως από αρχεία HTML, CSS και TypeScript.

Στο αρχείο TypeScript, μπορείτε να προσθέσετε οποιαδήποτε λογική απαιτείται για να λειτουργήσει η διεπαφή χρήστη, όπως η ανάκτηση δεδομένων από έναν διακομιστή.

Μπορείτε επίσης να αποδώσετε το HTML και το CSS του στοιχείου χρησιμοποιώντας TypeScript, προσδιορίζοντας τα χαρακτηριστικά του προτύπου και του στυλ του. Μπορείτε να χρησιμοποιήσετε templateUrl ή styleUrls για σύνδεση σε εξωτερικά αρχεία HTML ή CSS.

Τι είναι το πρότυπο και το templateUrl στο Angular;

Οταν εσύ δημιουργήστε το δικό σας στοιχείο στο Angular

• Μπορείτε να γράψετε τον κώδικα HTML μέσα σε ένα πρότυπο στο ίδιο το αρχείο TypeScript.
• Μπορείτε να γράψετε τον κώδικα HTML σε ένα εξωτερικό αρχείο και να συνδέσετε το αρχείο TypeScript σε αυτό το αρχείο HTML.

Σε ένα νέο στοιχείο, μπορείτε να ορίσετε είτε τα χαρακτηριστικά "template" ή "templateUrl", ανάλογα με το πού γράφετε το HTML σας.

1. Δημιουργώ ένα νέα εφαρμογή Angular.
2. Στο τερματικό της εφαρμογής σας, εκτελέστε το ng παράγουν συστατικό εντολή για τη δημιουργία ενός νέου στοιχείου. Καλέστε το νέο στοιχείο "σχετικά με τη σελίδα".

   ng δημιουργία στοιχείου σχετικά με τη σελίδα

3. Σε app.component.html, αντικαταστήστε τον τρέχοντα κώδικα με ετικέτες για το νέο σας στοιχείο:

   <app-about-page></app-about-page>

4. Ανοιξε το about-page.component.ts αρχείο. Εάν δεν έχετε πολύ κώδικα HTML, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό template για να τον γράψετε απευθείας μέσα στο αρχείο TypeScript. Αντικαταστήστε τον διακοσμητή @Component με τα εξής:

   @Συστατικό({
    εκλέκτορας: 'app-about-page',
    πρότυπο: '<h2>Σχετικά με τη σελίδα</h2><br><Π>Αυτό αποδίδει το HTML από το αρχείο TypeScript!</Π>'
   })
   

5. Εάν θέλετε να συμπεριλάβετε ένα πρότυπο με πολλές γραμμές, μπορείτε να χρησιμοποιήσετε αντίθετα εισαγωγικά:

   @Συστατικό({
    εκλέκτορας: 'app-about-page',
    πρότυπο: `<h2>Σχετικά με τη σελίδα</h2>
   <br>
   <Π>Αυτό αποδίδει το HTML από το αρχείο TypeScript!</Π>`
   })

6. Στο τερματικό, πληκτρολογήστε ng σερβίρετε για να μεταγλωττίσετε τον κώδικά σας και να τον εκτελέσετε σε ένα πρόγραμμα περιήγησης ιστού. Ανοίξτε την εφαρμογή σας στο http://localhost: 4200/. Ο κώδικας HTML από το αρχείο TypeScript θα αποδοθεί στη σελίδα.
7. Σε about-page.component.ts, αντικαταστήστε το "template" με το "templateUrl". Συμπεριλάβετε τον σύνδεσμο προς το εξωτερικό αρχείο HTML του στοιχείου. Μπορείτε να χρησιμοποιήσετε το "templateUrl" εάν έχετε πιο περίπλοκο κώδικα HTML που απαιτεί το δικό του αρχείο.

   @Συστατικό({
    εκλέκτορας: 'app-about-page',
    templateUrl: './about-page.component.html'
   })

8. Προσθέστε κάποιο κώδικα HTML στο about-page.component.html αρχείο:

   <h2>Σχετικά με τη σελίδα</h2>
   <Π>Αυτό αποδίδει το HTML από το αρχείο HTML!</Π>

9. Επιστρέψτε στο πρόγραμμα περιήγησής σας ή εκτελέστε ξανά ng σερβίρετε για να μεταγλωττίσετε ξανά τον κώδικα σας. Ανοίξτε την εφαρμογή σας στο http://localhost: 4200/. Το πρόγραμμα περιήγησης αποδίδει τώρα το HTML από το about-page.component.html αρχείο.

Τι είναι τα στυλ και τα styleUrl στο Angular;

Ομοίως με το HTML, μπορείτε να χρησιμοποιήσετε είτε "style" ή "styleUrls" ανάλογα με το πού επιλέγετε να αποθηκεύσετε το CSS σας.

Μπορείτε να συμπεριλάβετε CSS στον κώδικα TypeScript εάν έχετε πολύ απλές δηλώσεις CSS. Διαφορετικά, μπορείτε να χρησιμοποιήσετε το "styleUrls" για να συνδέσετε το αρχείο TypeScript με ένα εξωτερικό CSS που περιέχει περισσότερα στυλ.

1. Στην εφαρμογή Angular που δημιουργήσατε προηγουμένως, ανοίξτε το about-page.component.ts αρχείο. Προσθέστε ένα χαρακτηριστικό "styles" στο στοιχείο. Μέσα στα "στυλ", προσθέστε το στυλ CSS για τη σελίδα:

   @Συστατικό({
    εκλέκτορας: 'app-about-page',
    templateUrl: './about-page.component.html',
    στυλ: ['h2 {χρώμα: κόκκινο}','p {χρώμα: πράσινο}']
   })

2. Στο τερματικό, πληκτρολογήστε ng σερβίρετε για να μεταγλωττίσετε τον κώδικά σας και να τον εκτελέσετε σε ένα πρόγραμμα περιήγησης ιστού. Ανοίξτε την εφαρμογή σας στο http://localhost: 4200/ για να προβάλετε το στυλ που καθορίζεται στο αρχείο TypeScript.
3. Εάν έχετε πολλά CSS, χρησιμοποιήστε "styleUrls" αντί για "styles", για να συνδέσετε το αρχείο TypeScript με ένα εξωτερικό αρχείο CSS. Σε about-page.component.ts, αντικαταστήστε το @Component decorator με το εξής:

   @Συστατικό({
    εκλέκτορας: 'app-about-page',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Προσθέστε κάποιο στυλ CSS σε about-page.component.css:

   h2 {
    χρώμα: μπλε
   }
   Π {
    χρώμα: σκούρο πορτοκαλί
   }

5. Επιστρέψτε στο πρόγραμμα περιήγησής σας ή εκτελέστε ξανά ng σερβίρετε για να μεταγλωττίσετε ξανά τον κώδικα σας. Ανοίξτε την εφαρμογή σας στο http://localhost: 4200/ για να προβάλετε τα στυλ που χρησιμοποιούνται από το εξωτερικό αρχείο CSS.

Απόδοση του HTML ενός στοιχείου σε Angular

Τώρα γνωρίζετε τους διαφορετικούς τρόπους με τους οποίους μπορείτε να αποδώσετε το περιεχόμενο HTML και CSS σε μια εφαρμογή Angular. Μπορείτε να καθορίσετε ποια προσέγγιση θέλετε να χρησιμοποιήσετε με βάση την πολυπλοκότητα του HTML και του CSS σας.

Εάν ενδιαφέρεστε, μπορείτε να εξερευνήσετε πώς να μεταβιβάζετε δεδομένα μεταξύ των αρχείων HTML και TypeScript ενός στοιχείου Angular.