Kas yra šablono URL ir stiliaus URL kampe?

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

Naudodami Angular galite atskirti puslapius, dialogo langus ar kitas programos dalis į komponentus. „Angular“ programos komponentai daugiausia sudaryti iš HTML, CSS ir „TypeScript“ failų.

„TypeScript“ faile galite pridėti bet kokią logiką, reikalingą vartotojo sąsajai, pvz., duomenų gavimą iš serverio.

Taip pat galite pateikti komponento HTML ir CSS naudodami TypeScript, nurodydami jo šablono ir stiliaus atributus. Galite naudoti templateUrl arba styleUrls, kad susietumėte su išoriniais HTML arba CSS failais.

kaip užblokuoti ką nors „twitch“

DIENOS VAIZDO ĮRAŠO PAGALBA

Kas yra Angular šablonas ir šablono URL?

Kada tu sukurkite savo komponentą Angular , galite pateikti jo HTML naudodami šabloną. Yra du būdai, kaip galite parašyti HTML šabloną:

„iPhone“ neprisijungia prie kompiuterio, bet įkraunamas

HTML kodą galite įrašyti šablone pačiame TypeScript faile.
Galite įrašyti HTML kodą išoriniame faile ir susieti TypeScript failą su šiuo HTML failu.

Naujame komponente galite nustatyti atributus „template“ arba „templateUrl“, priklausomai nuo to, kur rašote HTML.

Sukurti nauja Angular programa .
Programos terminale paleiskite generuojamo komponento komanda sukurti naują komponentą. Iškvieskite naują komponentą „apie puslapį“.
```
ng generate component about-page
```
Į app.component.html, pakeiskite dabartinį kodą naujo komponento žymomis:
```
<app-about-page></app-about-page>
```
Atidaryk apie puslapį.component.ts failą. Jei neturite daug HTML kodo, galite naudoti šablono atributą ir įrašyti jį tiesiai į TypeScript failą. Pakeiskite @Component dekoratorių šiuo:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

Jei norite įtraukti kelių eilučių šabloną, vietoj jo galite naudoti kabutes su varnele:

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

Terminale įveskite tarnauti Norėdami surinkti kodą ir paleisti jį žiniatinklio naršyklėje. Atidarykite programą adresu http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
Į apie puslapį.component.ts , vietoj to pakeiskite „template“ į „templateUrl“. Įtraukite nuorodą į išorinį komponento HTML failą. Galite naudoti „templateUrl“, jei turite sudėtingesnį HTML kodą, kuriam reikalingas atskiras failas.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

Pridėkite šiek tiek HTML kodo prie apie puslapį.component.html failas:

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Grįžkite į naršyklę arba paleiskite iš naujo tarnauti norėdami iš naujo sudaryti savo kodą. Atidarykite programą adresu http://localhost:4200/. The browser now renders the HTML from the apie puslapį.component.html failą.

Kas yra Angular stiliai ir stiliaus URL?

Panašiai kaip HTML, galite naudoti „stilius“ arba „styleUrls“, priklausomai nuo to, kur pasirinksite saugoti CSS.

Į TypeScript kodą galite įtraukti CSS, jei turite labai paprastas CSS deklaracijas. Kitu atveju galite naudoti „styleUrls“, kad susietumėte „TypeScript“ failą su išoriniu CSS, kuriame yra daugiau stilių.

Anksčiau sukurtoje Angular programoje atidarykite apie puslapį.component.ts failą. Prie komponento pridėkite atributą „stiliai“. Skiltyje „stiliai“ pridėkite savo puslapio CSS stilių:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
Terminale įveskite tarnauti Norėdami surinkti kodą ir paleisti jį žiniatinklio naršyklėje. Atidarykite programą adresu http://localhost:4200/ to view the styling specified in the TypeScript file.
Jei turite daug CSS, naudokite „styleUrls“, o ne „stilius“, kad susietumėte „TypeScript“ failą su išoriniu CSS failu. Į apie puslapį.component.ts , pakeiskite @Component decorator šiuo:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
Pridėkite šiek tiek CSS stiliaus apie puslapį.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
Grįžkite į naršyklę arba paleiskite iš naujo tarnauti kad iš naujo sudarytumėte savo kodą. Atidarykite programą adresu http://localhost:4200/ to view the styles used from the external CSS file.

Komponento HTML atvaizdavimas kampiniu formatu

Dabar žinote skirtingus būdus, kaip galite pateikti savo HTML ir CSS turinį kampinėje programoje. Galite nustatyti, kurį metodą norite naudoti, atsižvelgdami į savo HTML ir CSS sudėtingumą.

kaip susigrąžinti seriją „snapchat“

Jei susidomėjote, galite ištirti, kaip perduoti duomenis tarp kampinio komponento HTML ir TypeScript failų.