Komponentas yra vienas iš svarbiausių kampinės programos elementų. Komponentai yra daugkartinio naudojimo kodo bitai, kurie sudaro tam tikras jūsų svetainės dalis.
Komponentų, kuriuos galite sukurti, pavyzdžiai apima mažesnius vartotojo sąsajos elementus, pvz., mygtukus ar korteles. Juose taip pat gali būti didesnių vartotojo sąsajos elementų, tokių kaip šoninės juostos, naršymo juostos arba ištisi puslapiai.
Komponentų naudojimas kampe
Kai kuriate komponentus „Angular“ programoje, galite juos naudoti kituose komponentuose. Pavyzdžiui, galite sukurti didelio vartotojo sąsajos kortelės elemento komponentą. Tada galite naudoti šį komponentą kaip įprastą HTML žymą, kur tik norite:
<app-new-component></app-new-component>Kadangi komponentai yra daugkartinio naudojimo kodo bitai, taip pat galite perduoti kintamuosius, kad kiekvieno atvejo duomenys būtų skirtingi. Taip pat galite sukurti puslapių komponentus ir atitinkamai nukreipti juos naudodami app-routing.module.ts failą.
Galite kurti savo komponentus pagal programos struktūrą ir tai, kiek norite atskirti savo funkcijas.
Kaip sukurti komponentą
Galite naudoti nggeneruoti komandą sukurti naują komponentą.
- Sukurti naują Kampinis pritaikymas naudojant naujas arba atidarykite esamą.
- Atidarykite komandų eilutę arba terminalą. Arba, jei jūsų kampinė programa yra atidaryta IDE, pvz., „Visual Studio Code“., galite naudoti įmontuotą terminalą.
- Terminale eikite į projekto šakninio aplanko vietą. Pavyzdžiui:
cd C:\Users\Sharl\Desktop\Angular-Application - Paleiskite ng generuoti komponentą komandą, po kurios nurodomas naujo komponento pavadinimas:
ng generuoti komponento UI kortelę - Naujas komponentas bus sukurtas naujame aplanke, viduje src/app katalogas.
Kaip pridėti turinį prie kampinio komponento
„Angular“ sukuria kiekvieną komponentą naudodama HTML, CSS, „TypeScript“ ir testavimo specifikacijų failą.
- The HTML failą saugo komponento HTML turinį.
- The CSS failą išsaugo komponento stilių.
- The Testavimo specifikacijos (spec.ts) failas saugo visus komponento vienetų testus.
- The TypeScript failas išsaugo komponentą apibrėžiančią logiką ir funkcionalumą.
Pridėkite šiek tiek turinio į tinkintą UI kortelės komponentą.
- Atviras src/app/ui-card/ui-card.component.htmlir atnaujinkite komponento HTML. Įsitikinkite, kad aplanke pavadintas vaizdas turi tą patį pavadinimą src/assets/images jūsų kampinėje programoje. Pakeiskite turinį ui-card.component.html su šiais dalykais:
<div klasė ="kortelę">
<img src="./assets/images/blue-mountains.jpg" alt="Avataras">
<div klasė ="konteineris">
<h4 klasė ="titulą"> Mėlynieji kalnai </h4>
<p> NSW, Australija </p>
</div>
</div> - Atviras ui-card.component.cssir pridėkite CSS turinį prie komponento:
.kortelė {
dėžutė-šešėlis: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
plotis: 400px;
paminkštinimas: 8px;
marža: 24px;
fono spalva: baltų dūmų;
šrifto šeima: be serifo;
}.kortelėimg {
maksimalus plotis: 400px;
}.pavadinimas {
kamšalas-viršus: 16px;
}.konteineris {
paminkštinimas: 2px 16px;
} - The ui-card.component.ts faile jau yra naujo komponento klasė, kurioje galite pridėti naujų funkcijų, logikos ir funkcionalumo. Tai turėtų atrodyti taip:
eksportuotiklasė UiCardComponent padargai OnInit {
konstruktorius() { }
ngOnInit(): tuštuma {
// Čia pridėkite šiek tiek kodo logikos
}
// Arba pridėkite savo logiką ir funkcionalumą naujose funkcijose
}
Kaip naudoti komponentą kito komponento HTML
Viduje ui-card.component.ts, yra trys atributai: parinkiklis, šablono URL ir styleUrl. TemplateUrl nurodo komponento HTML (taigi ir nuorodas į HTML failą). Atributas styleUrls nurodo komponento CSS ir nuorodas į CSS failą.
@Komponentas({
parinkiklis: „app-ui-card“,
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Kai UI kortelės komponentą naudosite kitame komponente, naudosite parinkiklio pavadinimą „app-ui-card“.
- Pirmiausia pridėkite šiek tiek turinio į savo tinklalapį. Atviras src/app/app.component.html ir pridėkite naršymo juostą:
<div klasė ="naršymo juosta-antraštė">
<klasė ="nav-pavadinimas"><b> Žiniatinklio naršymo juosta </b></a>
</div> - Pridėkite šiek tiek stiliaus prie naršymo juostos src/app/app.component.css:
.navbar-header {
fono spalva: #07393C;
paminkštinimas: 30px 50px;
ekranas: lankstus;
išlyginti elementus: centras;
šrifto šeima: be serifo;
}.nav-title {
tekstas-dekoravimas: nė vienas;
spalva: baltas;
šrifto dydis: 16pt;
} - Po naršymo juosta app.component.html, pridėkite naują vartotojo sąsajos kortelę. Naudokite „app-ui-card“ parinkiklio pavadinimą kaip HTML žymą:
<app-ui-card></app-ui-card> - Taip pat galite pakartotinai naudoti komponentą įtraukdami žymą kelis kartus. Norėdami tai padaryti, pakeiskite aukščiau esančią eilutę, kad vietoj jos būtų naudojamos kelios programos-ui-card HTML žymos:
<div stilius ="ekranas: lankstus">
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
</div> - Paleiskite savo Angular programą iš terminalo naudodami ng tarnauti komandą ir atidarykite savo svetainę žiniatinklio naršyklėje.
Kaip perduoti įvesties parametrus į komponentą
Kadangi komponentą galima naudoti pakartotinai, yra atributų, kuriuos galbūt norėsite pakeisti kiekvieną kartą jį naudodami. Tokiu atveju galite naudoti įvesties parametrus.
- Papildyti Įvestis į importuojamų prekių sąrašą, esantį viršuje ui-card.component.ts:
importuoti { Komponentas, įvestis, „OnInit“} iš '@kampinis/core'; - Tada viduje pridėkite du įvesties kintamuosius UIcardComponent klasė. Tai leis jums pakeisti vietos pavadinimą ir vaizdą, kuris rodomas kortelėje. Užpildykite ngOnInit funkcija, kaip parodyta, norėdami sukurti kelią į vaizdą arba naudoti numatytąją reikšmę:
eksportuotiklasė UiCardComponent padargai OnInit {
@Įvestis() vietovės pavadinimas: styga;
@Įvestis() vaizdo pavadinimas: styga;konstruktorius() { }
ngOnInit(): tuštuma {
jeigu (tai.imageName) {
tai.imageName = "./assets/images/" + tai.imageName;
} Kitas {
tai.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Į ui-card.component.html, pakeiskite užkoduotą 4 antraštės reikšmę „Mėlynieji kalnai“, kad vietoj jos naudotumėte įvesties kintamąjį „locationName“. Taip pat pakeiskite kietąjį kodą src atributas vaizdo žymoje, kad būtų naudojamas įvesties kintamasis „imageName“:
<div klasė ="kortelę">
<img src="{{imageName}}" alt="Avataras">
<div klasė ="konteineris">
<h4 klasė ="titulą">{{locationName? Vietovės pavadinimas: 'Mėlynieji kalnai'}}</h4>
<p>NSW, Australija</p>
</div>
</div> - Į app.component.html, pakeiskite žymas „app-ui-card“, kad įtrauktumėte įvestis „locationName“ ir „imageName“. Kiekvienam vartotojo sąsajos kortelės elementui įveskite skirtingą reikšmę. Įsitikinkite, kad vaizdo failai yra jūsų Angular programos išteklių / vaizdų aplanke.
<div stilius ="ekranas: lankstus">
<app-ui-card [locationName]="'Mėlynieji kalnai'" [imageName]="'mėlyni kalnai.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sidnėjus'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Niukaslas'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Paleiskite savo Angular programą iš terminalo naudodami ng tarnauti komandą ir atidarykite savo svetainę žiniatinklio naršyklėje.
Šiuo metu galite matyti klaidą dėl to, kad šiose ypatybėse nėra inicijavimo priemonės. Jei taip, tiesiog pridėkite arba nustatykite "strictPropertyInitialization": klaidinga tavo tsconfig.json.
Kaip nukreipti į naują komponentą
Jei jūsų komponentas yra didelė jūsų svetainės dalis, pvz., naujas puslapis, taip pat galite nukreipti į tą komponentą.
- Atviras app-routing.module.ts. Importuokite UI kortelės komponentą failo viršuje:
importuoti { UiCardComponent } iš './ui-card/ui-card.component'; - Pridėkite maršruto kelią į maršrutų masyvą:
konst maršrutai: Maršrutai = [
//... Kiti maršrutai, kurių jums gali prireikti...
{ kelias: 'uicard', komponentas: UiCardComponent },
] - Pakeiskite visą esamą turinį app.component.html kad būtų įtraukta tik naršymo juosta ir maršruto parinktuvo išvesties HTML žyma. Maršrutizatoriaus lizdas leidžia nukreipti tarp puslapių. Pridėkite hipersaitą prie naršymo juostos su href atributu, atitinkančiu kelią maršrutų masyve:
<div klasė ="naršymo juosta-antraštė">
<klasė ="nav-pavadinimas"><b> Žiniatinklio naršymo juosta </b></a>
<klasė ="nav-a-link" href="/uicard"><b> UI kortelė </b></a>
</div>
<maršrutizatorius-išvestis></router-outlet> - Pridėkite šiek tiek stiliaus prie naujos vartotojo sąsajos kortelės nuorodos app.component.css:
.nav-a-link {
tekstas-dekoravimas: nė vienas;
spalva: #4b6569;
šrifto dydis: 14pt;
paraštė-kairė: 60px;
šrifto svoris: lengvesni;
} - Paleiskite savo Angular programą iš terminalo naudodami ng tarnauti komandą ir atidarykite savo svetainę žiniatinklio naršyklėje. Nuoroda bus rodoma tinklalapio naršymo juostoje.
- Atkreipkite dėmesį į URL adresą savo žiniatinklio naršyklėje. Pagal numatytuosius nustatymus paprastai yra http://localhost: 4200/. Kai spustelėsite vartotojo sąsajos kortelės nuorodą, puslapis bus nukreiptas į http://localhost: 4200/uicard, ir pasirodys vartotojo sąsajos kortelė.
Komponentų kūrimas kampu
Komponentas yra vienas iš pagrindinių „Angular“ elementų. Komponentai leidžia suskaidyti skirtingas svetainės dalis į mažesnes daugkartinio naudojimo dalis. Galite bet ką paversti komponentais, įskaitant mažesnius mygtukus, korteles, didesnes šonines ir naršymo juostas.
Taip pat galite naudoti įvesties kintamuosius, norėdami perduoti duomenis įvairiems komponento egzemplioriams. Ir jūs galite nukreipti į komponentą naudodami URL kelius.
Jei kuriate naują „Angular“ programą, gali tekti sukurti naršymo juostą, kad naudotojai galėtų naršyti po jūsų komponentus. Turėdami jautrią naršymo juostą galite peržiūrėti ją skirtinguose įrenginiuose, skirtingų dydžių ekranuose.
