Mik azok a templateUrl-ek és styleUrl-ek az Angular-ban?

Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

Az Angular használatával az oldalakat, párbeszédpaneleket vagy az alkalmazás egyéb részeit összetevőkre választhatja szét. Az Angular alkalmazások összetevői főként HTML-, CSS- és TypeScript-fájlokból állnak.

A TypeScript-fájlban bármilyen logikát hozzáadhat, amely a felhasználói felület működéséhez szükséges, például adatok lekérését a szerverről.

Az összetevő HTML- és CSS-kódja is megjeleníthető TypeScript használatával, a sablon- és stílusattribútumok megadásával. A templateUrl vagy styleUrls használatával külső HTML- vagy CSS-fájlokra hivatkozhat.

Mi a sablon és a templateUrl az Angular nyelvben?

Amikor te létrehozhatja saját komponensét az Angularban, akkor egy sablon segítségével renderelheti a HTML-kódot. Kétféleképpen írhatja meg HTML-sablonját:

• A HTML-kódot egy sablonba is beírhatja, magában a TypeScript fájlban.
• A HTML-kódot külső fájlba írhatja, és a TypeScript-fájlt ehhez a HTML-fájlhoz kapcsolhatja.

Egy új összetevőben beállíthatja a "template" vagy a "templateUrl" attribútumokat attól függően, hogy hova írja a HTML-t.

1. Hozzon létre egy új Angular alkalmazás.
2. Az alkalmazás termináljában futtassa a ng összetevőt generál parancsot új komponens létrehozásához. Hívja az új komponenst "about-page"-nak.

   ng komponenst generál az oldalról

3. Ban ben app.component.html, cserélje ki a jelenlegi kódot az új összetevő címkéire:

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

4. Nyissa meg a about-page.component.ts fájlt. Ha nem rendelkezik sok HTML-kóddal, a template attribútum segítségével közvetlenül a TypeScript fájlba írhatja azt. Cserélje ki a @Component dekorátort a következőre:

   @Összetevő({
    választó: 'app-about-oldal',
    sablon: '<h2>Az oldalról</h2><br><p>Ez a HTML renderelése a TypeScript fájlból!</p>'
   })
   

5. Ha többsoros sablont szeretne beilleszteni, használhatja helyette az idézőjeleket:

   @Összetevő({
    választó: 'app-about-oldal',
    sablon: `<h2>Az oldalról</h2>
   <br>
   <p>Ez a HTML renderelése a TypeScript fájlból!</p>`
   })

6. A terminálba írja be ng szolgálni a kód összeállításához és böngészőben való futtatásához. Nyissa meg az alkalmazást a következő címen: http://localhost: 4200/. A TypeScript fájlból származó HTML-kód megjelenik az oldalon.
7. Ban ben about-page.component.ts, cserélje ki a "sablon" helyett a "templateUrl" kifejezést. Tartalmazza az összetevő külső HTML-fájljára mutató hivatkozást. Használhatja a "templateUrl"-t, ha összetettebb HTML-kódja van, amelyhez saját fájl szükséges.

   @Összetevő({
    választó: 'app-about-oldal',
    sablonUrl: './about-page.component.html'
   })

8. Adjon hozzá néhány HTML kódot a about-page.component.html fájl:

   <h2>Az oldalról</h2>
   <p>Ez a HTML renderelése a HTML fájlból!</p>

9. Menjen vissza a böngészőbe, vagy futtassa újra ng szolgálni hogy újra lefordítsa a kódját. Nyissa meg az alkalmazást a következő címen: http://localhost: 4200/. A böngésző most előállítja a HTML-t a about-page.component.html fájlt.

Mik azok a stílusok és styleUrl-ek az Angular-ban?

A HTML-hez hasonlóan használhatja a "stílus" vagy a "styleUrl" kifejezést attól függően, hogy hol tárolja CSS-jét.

Ha nagyon egyszerű CSS-deklarációi vannak, akkor a TypeScript kódba belefoglalhatja a CSS-t. Ellenkező esetben a "styleUrls" használatával összekapcsolhatja a TypeScript-fájlt egy több stílust tartalmazó külső CSS-hez.

1. A korábban létrehozott Angular alkalmazásban nyissa meg a about-page.component.ts fájlt. Adjon hozzá egy "styles" attribútumot az összetevőhöz. A "stílusok" részben adja hozzá az oldal CSS-stílusát:

   @Összetevő({
    választó: 'app-about-oldal',
    sablonUrl: './about-page.component.html',
    stílusok: ['h2 {szín: piros}','p {szín: zöld}']
   })

2. A terminálba írja be ng szolgálni a kód összeállításához és böngészőben való futtatásához. Nyissa meg az alkalmazást a következő címen: http://localhost: 4200/ a TypeScript fájlban megadott stílus megjelenítéséhez.
3. Ha sok CSS-je van, használja a „styleUrls”-t a „styles” helyett, hogy a TypeScript-fájlt külső CSS-fájlhoz kapcsolja. Ban ben about-page.component.ts, cserélje ki a @Component dekorátort a következőre:

   @Összetevő({
    választó: 'app-about-oldal',
    sablonUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Adjon hozzá némi CSS-stílust about-page.component.css:

   h2 {
    szín: kék
   }
   p {
    szín: sötétbarna
   }

5. Menjen vissza a böngészőbe, vagy futtassa újra ng szolgálni hogy újra lefordítsa a kódját. Nyissa meg az alkalmazást a következő címen: http://localhost: 4200/ a külső CSS fájlból használt stílusok megtekintéséhez.

Egy komponens HTML-jének megjelenítése szögben

Most már ismeri a HTML- és CSS-tartalom megjelenítésének különböző módjait egy Angular alkalmazásban. A HTML és a CSS összetettsége alapján meghatározhatja, hogy melyik megközelítést szeretné használni.

Ha érdekli, felfedezheti, hogyan továbbíthat adatokat egy Angular-összetevő HTML- és TypeScript-fájljai között.