Kas ir veidnes URL un stila URL leņķiskajā?

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.

Izmantojot Angular, varat sadalīt lapas, dialoglodziņus vai citas lietotnes sadaļas komponentos. Angular lietojumprogrammas komponenti galvenokārt sastāv no HTML, CSS un TypeScript failiem.

TypeScript failā varat pievienot jebkuru loģiku, kas nepieciešama lietotāja interfeisa darbībai, piemēram, datu izgūšanu no servera.

Varat arī renderēt komponenta HTML un CSS, izmantojot TypeScript, norādot tā veidnes un stila atribūtus. Varat izmantot templateUrl vai styleUrls, lai izveidotu saiti uz ārējiem HTML vai CSS failiem.

Kas ir veidne un veidnes URL valodā Angular?

Kad jūs izveidot savu komponentu Angular, varat atveidot tā HTML, izmantojot veidni. Ir divi veidi, kā rakstīt HTML veidni:

• HTML kodu varat ierakstīt veidnē pašā TypeScript failā.
• Varat ierakstīt HTML kodu ārējā failā un saistīt TypeScript failu ar šo HTML failu.

Jaunā komponentā varat iestatīt atribūtus “template” vai “templateUrl” atkarībā no tā, kur rakstāt HTML.

1. Izveidot a jauna Angular lietotne.
2. Lietojumprogrammas terminālī palaidiet ng ģenerēt komponentu komandu, lai izveidotu jaunu komponentu. Izsauciet jauno komponentu "about-page".

   ng ģenerēt komponentu par lapu

3. In app.component.html, aizstāt pašreizējo kodu ar sava jaunā komponenta tagiem:

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

4. Atveriet about-page.component.ts failu. Ja jums nav daudz HTML koda, varat izmantot veidnes atribūtu, lai to ierakstītu tieši TypeScript failā. Nomainiet @Component dekoratoru ar šādu:

   @Komponents({
    atlasītājs: 'app-about-lapa',
    veidne: '<h2>Par lapu</h2><br><lpp>Tas ir HTML renderēšana no TypeScript faila!</lpp>'
   })
   

5. Ja vēlaties iekļaut vairāku rindiņu veidni, tā vietā varat izmantot pēdiņas ar ķeksīti:

   @Komponents({
    atlasītājs: 'app-about-lapa',
    veidne: `<h2>Par lapu</h2>
   <br>
   <lpp>Tas ir HTML renderēšana no TypeScript faila!</lpp>`
   })

6. Terminālī ierakstiet ng kalpot lai apkopotu savu kodu un palaistu to tīmekļa pārlūkprogrammā. Atveriet savu lietotni vietnē http://localhost: 4200/. Lapā tiks atveidots jūsu HTML kods no TypeScript faila.
7. In about-page.component.ts, aizstājiet "veidni" ar "templateUrl". Iekļaujiet saiti uz komponenta ārējo HTML failu. Varat izmantot “templateUrl”, ja jums ir sarežģītāks HTML kods, kuram nepieciešams savs fails.

   @Komponents({
    atlasītājs: 'app-about-lapa',
    templateUrl: './about-page.component.html'
   })

8. Pievienojiet HTML kodu about-page.component.html fails:

   <h2>Par lapu</h2>
   <lpp>Šī ir HTML atveidošana no HTML faila!</lpp>

9. Atgriezieties pārlūkprogrammā vai palaidiet vēlreiz ng kalpot lai atkārtoti apkopotu savu kodu. Atveriet savu lietotni vietnē http://localhost: 4200/. Tagad pārlūkprogramma atveido HTML no about-page.component.html failu.

Kas ir stili un stila URL leņķī?

Līdzīgi kā HTML, atkarībā no tā, kur izvēlaties glabāt savu CSS, varat izmantot vai nu "style" vai "styleUrls".

TypeScript kodā varat iekļaut CSS, ja jums ir ļoti vienkāršas CSS deklarācijas. Pretējā gadījumā varat izmantot "styleUrl", lai saistītu TypeScript failu ar ārēju CSS, kurā ir vairāk stilu.

1. Iepriekš izveidotajā Angular lietojumprogrammā atveriet about-page.component.ts failu. Pievienojiet komponentam atribūtu "styles". Sadaļā "Stili" pievienojiet savu lapas CSS stilu:

   @Komponents({
    atlasītājs: 'app-about-lapa',
    templateUrl: './about-page.component.html',
    stili: ['h2 {krāsa: sarkana}','p {krāsa: zaļa}']
   })

2. Terminālī ierakstiet ng kalpot lai apkopotu savu kodu un palaistu to tīmekļa pārlūkprogrammā. Atveriet savu lietotni vietnē http://localhost: 4200/, lai skatītu TypeScript failā norādīto stilu.
3. Ja jums ir daudz CSS, izmantojiet "styleUrls", nevis "styles", lai saistītu TypeScript failu ar ārēju CSS failu. In about-page.component.ts, nomainiet @Component dekoratoru ar šādu:

   @Komponents({
    atlasītājs: 'app-about-lapa',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Pievienojiet kādu CSS stilu about-page.component.css:

   h2 {
    krāsa: zila
   }
   p {
    krāsa: tumši oranža
   }

5. Atgriezieties pārlūkprogrammā vai palaidiet vēlreiz ng kalpot lai atkārtoti apkopotu savu kodu. Atveriet savu lietotni vietnē http://localhost: 4200/, lai skatītu izmantotos stilus no ārējā CSS faila.

Komponenta HTML renderēšana leņķiskā formātā

Tagad jūs zināt dažādus veidus, kā Angular lietojumprogrammā varat renderēt savu HTML un CSS saturu. Varat noteikt, kuru pieeju vēlaties izmantot, pamatojoties uz jūsu HTML un CSS sarežģītību.

Ja jūs interesē, varat izpētīt, kā nodot datus starp Angular komponenta HTML un TypeScript failiem.