Komponenta je eden najpomembnejših gradnikov aplikacije Angular. Komponente so koščki kode za večkratno uporabo, ki sestavljajo določene dele vašega spletnega mesta.

Primeri komponent, ki jih lahko ustvarite, vključujejo manjše elemente uporabniškega vmesnika, kot so gumbi ali kartice. Vključujejo lahko tudi večje elemente uporabniškega vmesnika, kot so stranske vrstice, navigacijske vrstice ali cele strani.

Uporaba komponent v Angularju

Ko ustvarite komponente v aplikaciji Angular, jih lahko uporabite v drugih komponentah. Na primer, lahko ustvarite komponento za velik element kartice uporabniškega vmesnika. To komponento lahko nato uporabite kot običajno oznako HTML, kjer koli želite:

<app-nova-komponenta></app-new-component>

Ker so komponente večkrat uporabni deli kode, lahko posredujete tudi spremenljivke, tako da so podatki za vsak primer različni. Prav tako lahko ustvarite komponente za strani in jih lahko ustrezno usmerite z uporabo app-routing.module.ts mapa.

Svoje komponente lahko oblikujete glede na strukturo vaše aplikacije in glede na to, koliko želite ločiti svojo funkcionalnost.

instagram viewer

Kako ustvariti komponento

Lahko uporabite ngustvari ukaz da ustvarite novo komponento.

  1. Ustvarite novo Kotna aplikacija z uporabo ng nov ali odprite obstoječega.
  2. Odprite ukazni poziv ali terminal. Druga možnost je, če imate aplikacijo Angular odprto v datoteki IDE, kot je Visual Studio Code, lahko uporabite vgrajeni terminal.
  3. V terminalu se pomaknite do lokacije korenske mape projekta. Na primer:
    cd C:\Users\Sharl\Desktop\Angular-Application
  4. Zaženite ng generirati komponento ukaz, ki mu sledi ime nove komponente:
    ng ustvari komponento ui-kartice
  5. Nova komponenta bo ustvarjena v novi mapi, znotraj src/app imenik.

Kako dodati vsebino kotni komponenti

Angular ustvari vsako komponento z datoteko HTML, CSS, TypeScript in specifikacijo testiranja.

  • The HTML datoteka shrani vsebino HTML komponente.
  • The datoteko CSS shrani slog komponente.
  • The Datoteka specifikacije testiranja (spec.ts). shrani vse teste enote za komponento.
  • The Datoteka TypeScript shrani logiko in funkcionalnost, ki definira komponento.

Dodajte nekaj vsebine komponenti kartice ui po meri.

  1. Odprto src/app/ui-card/ui-card.component.html, in posodobite HTML komponente. Prepričajte se, da imate sliko z istim imenom v mapi z imenom src/sredstva/slike v vaši aplikaciji Angular. Zamenjajte vsebino ui-card.component.html z naslednjim:
    <div razred="kartica">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div razred="posoda">
    <h4 razred ="naslov"> Modre gore </h4>
    <str> NSW, Avstralija </str>
    </div>
    </div>
  2. Odprto ui-card.component.css, in komponenti dodajte vsebino CSS:
    .kartica {
    škatla-senca: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    premer: 400px;
    oblazinjenje: 8px;
    marža: 24px;
    Barva ozadja: beli dim;
    družina pisav: sans-serif;
    }
    .karticaimg {
    največja širina: 400px;
    }
    

    .naslov {
    padding-top: 16px;
    }
    .posoda {
    oblazinjenje: 2px 16px;
    }
  3. The ui-card.component.ts datoteka že vsebuje razred za novo komponento, kamor lahko dodate nove funkcije, logiko in funkcionalnost. Izgledalo bi takole:
    izvozrazred UiCardComponent orodja OnInit {
    konstruktor() { }
     ngOnInit(): nična {
    // Tukaj dodajte nekaj logike kode
     }
    // Ali pa dodajte svojo logiko in funkcionalnost v nove funkcije
    }

Kako uporabljati komponento v HTML-ju druge komponente

V notranjosti ui-card.component.ts, obstajajo trije atributi: izbirnik, templateUrl in styleUrl. TemplateUrl se nanaša na HTML komponente (in se zato povezuje z datoteko HTML). Atribut styleUrls se nanaša na CSS komponente in povezuje na datoteko CSS.

@Komponenta({
 izbirnik: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

Ko uporabljate komponento UI Card v drugi komponenti, boste uporabili ime izbirnika "app-ui-card".

  1. Najprej dodajte nekaj vsebine na svojo spletno stran. Odprto src/app/app.component.html in dodaj navigacijsko vrstico:
    <div razred="glava navigacijske vrstice">
    <razred ="nav-naslov"><b> Spletna navigacijska vrstica </b></a>
    </div>
  2. Dodajte nekaj stilov v svojo navigacijsko vrstico src/app/app.component.css:
    .navbar-header {
    Barva ozadja: #07393C;
    oblazinjenje: 30px 50px;
    prikazovalniku: upogniti;
    poravnajte elemente: center;
    družina pisav: sans-serif;
    }
    .nav-title {
    besedilna dekoracija: nobenega;
    barva: belo;
    velikost pisave: 16pt;
    }
  3. Pod navigacijsko vrstico v app.component.html, dodajte novo kartico uporabniškega vmesnika. Uporabite ime izbirnika "app-ui-card" kot oznako HTML:
    <app-ui-card></app-ui-card>
  4. Komponento lahko tudi ponovno uporabite tako, da večkrat vključite oznako. Če želite to narediti, zamenjajte zgornjo vrstico in namesto tega uporabite več oznak HTML app-ui-card:
    <div style="zaslon: flex">
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    </div>
  5. Zaženite svojo aplikacijo Angular iz terminala z uporabo ng služijo ukaz in odprite svoje spletno mesto v spletnem brskalniku.

Kako prenesti vhodne parametre v komponento

Ker je komponenta ponovno uporabna, obstajajo atributi, ki jih boste morda želeli spremeniti vsakič, ko jo uporabite. V tem primeru lahko uporabite vhodne parametre.

  1. Dodaj Vnos na seznam uvozov na vrhu ui-card.component.ts:
    uvoz { Komponenta, vhod, OnInit } od '@kotni/core';
  2. Nato dodajte dve vhodni spremenljivki znotraj UICardComponent razred. Tako boste lahko spremenili ime lokacije in sliko, ki se prikaže na kartici. Napolnite ngOnInit funkcijo, kot je prikazano, da zgradite pot do slike ali uporabite privzeto vrednost:
    izvozrazred UiCardComponent orodja OnInit {
    @Vnos() locationName: vrvica;
    @Vnos() Ime slike: vrvica;
    konstruktor() { }
     ngOnInit(): nična {
    če (to.imageName) {
    to.imageName = "./assets/images/" + to.imageName;
     } drugo {
    to.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. V ui-card.component.html, spremenite trdo kodirano vrednost "Modre gore" naslova 4, da namesto tega uporabite vhodno spremenljivko "locationName". Spremenite tudi trdo kodirano src atribut v oznaki slike za uporabo vhodne spremenljivke "imageName":
    <div razred="kartica">
    <img src="{{imageName}}" alt="Avatar">
    <div razred="posoda">
    <h4 razred ="naslov">{{locationName? locationName: 'Modre gore'}}</h4>
    <str>NSW, Avstralija</str>
    </div>
    </div>
  4. V app.component.html, spremenite oznake »app-ui-card«, da bodo vključevale vnosa »locationName« in »imageName«. Za vsak element kartice uporabniškega vmesnika vnesite drugačno vrednost. Prepričajte se, da slikovne datoteke obstajajo v mapi sredstva/slike vaše aplikacije Angular.
    <div style="zaslon: flex">
    <app-ui-card [locationName]="'Modre gore'" [ime slike]="'blue-mountains.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Sydney'" [ime slike]="'sydney.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Newcastle'" [ime slike]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Zaženite svojo aplikacijo Angular iz terminala z uporabo ng služijo ukaz in odprite svoje spletno mesto v spletnem brskalniku.

Na tej točki boste morda videli napako, da te lastnosti nimajo inicializatorja. Če je tako, samo dodajte ali nastavite "strictPropertyInitialization": false v vašem tsconfig.json.

Kako usmerjati do nove komponente

Če vaša komponenta predstavlja velik del vašega spletnega mesta, kot je nova stran, se lahko usmerite tudi na to komponento.

  1. Odprto app-routing.module.ts. Uvozite komponento kartice uporabniškega vmesnika na vrhu datoteke:
    uvoz {UiCardComponent} od './ui-card/ui-card.component';
  2. Dodajte usmerjevalno pot v matriko poti:
    konst poti: Poti = [
    //... Vse druge poti, ki jih morda potrebujete ...
     { pot: 'uicard', komponenta: UiCardComponent },
    ]
  3. Zamenjajte vso trenutno vsebino v app.component.html vključiti samo navigacijsko vrstico in oznako HTML izhoda usmerjevalnika. Vtičnica usmerjevalnika vam omogoča usmerjanje med stranmi. Dodajte hiperpovezavo v navigacijsko vrstico, pri čemer se atribut href ujema s potjo v nizu poti:
    <div razred="glava navigacijske vrstice">
    <razred ="nav-naslov"><b> Spletna navigacijska vrstica </b></a>
    <razred ="nav-a-povezava" href="/uicard"><b> UI kartica </b></a>
    </div>
    <usmerjevalnik-izhod></router-outlet>
  4. Dodajte nekaj stilov novi povezavi kartice uporabniškega vmesnika, v app.component.css:
    .nav-a-link {
    besedilna dekoracija: nobenega;
    barva: #4b6569;
    velikost pisave: 14pt;
    rob-levo: 60px;
    font-weight: vžigalnik;
    }
  5. Zaženite svojo aplikacijo Angular iz terminala z uporabo ng služijo ukaz in odprite svoje spletno mesto v spletnem brskalniku. Povezava se bo pojavila v navigacijski vrstici na spletni strani.
  6. Zabeležite si naslov URL v svojem spletnem brskalniku. Privzeto je običajno http://localhost: 4200/. Ko kliknete povezavo kartice uporabniškega vmesnika, se stran usmeri na http://localhost: 4200/uicard, in prikazala se bo kartica uporabniškega vmesnika.

Ustvarjanje komponent v Angularju

Komponenta je eden od glavnih gradnikov Angular. Komponente vam omogočajo, da različne dele vašega spletnega mesta razdelite na manjše dele, ki jih je mogoče ponovno uporabiti. V komponente lahko naredite kar koli, vključno z manjšimi gumbi, karticami, večjimi stranskimi vrsticami in navigacijskimi vrsticami.

Vhodne spremenljivke lahko uporabite tudi za posredovanje podatkov med različnimi primerki komponente. Do komponente lahko usmerite s pomočjo URL poti.

Če razvijate novo aplikacijo Angular, boste morda morali zgraditi navigacijsko vrstico, da se bodo uporabniki lahko pomikali po vaših komponentah. Odzivna navigacijska vrstica vam omogoča, da si jo ogledate na različnih napravah, na različnih velikostih zaslona.