szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular Komponensek ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A komponensekről =====

Egy weblapot több komponensből állíthatunk össze. A komponenseket két módon használhatom fel:

  * beépítem a főkomponensbe, vagy egy másik komponensbe
  * a főkomponensben (vagy bármelyik másikban) váltogatom a komponenseket útválasztással

==== Beépítés ====

A legegyszerűbb eset, amikor egy komponenst a főkomponensbe ágyazunk, ahogy 
az ábra is szemlélteti:

{{:oktatas:web:angular:componens_egymasba_00.png|}}

De lehet akár több komponensünk:

{{:oktatas:web:angular:componens_egymasba_01.png|}}

{{:oktatas:web:angular:componens_egymasba_02.png|}}

De bármelyik komponens állhat több részből:

{{:oktatas:web:angular:componens_egymasba_03.png|}}

==== Csere ====

Útválasztás (routing) segítségével cserélhetjük az egyes komponenseket:

{{:oktatas:web:angular:componens_csere_01.png|}}


Ez lehet akár több komponens is:


{{:oktatas:web:angular:componens_csere_02.png|}}



===== Létrehozás  =====


Szintaxis:
  ng generate component <komponensnev>

Hozzunk létre például egy "employee" nevű komponenst:
  ng generate component employee


A parancs rövidíthető:
  ng g c employee


===== Ami létrejön =====

<code>
app01/
  `-src/
     `-employee/
        |-employee.component.css
        |-employee.component.html
        |-employee.component.spec.ts
        `-employee.component.ts
</code>


<code html employee.component.html>
<p>employee works!</p>
</code>


<code javascript employee.component.ts>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
</code>

A stílus fájl üres lesz, a teszt jelenleg lényegtelen.

===== Hagyományos komponensek bejegyezése =====

Az újabb standalone komponenseket nem szükséges sehova bejegyezni, ezért standalone.
A hagyományos komponenseket azonban be kell jegyezni az app.mdoule.ts fájlba.

  * app.module.ts

<code javascript>
//...
@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
  ],
</code>


===== Gyakorlat =====

Készítsen két komponenst a következő neveken:
  * first
  * second


Használható parancsok:
  ng g c first
  ng g c second

Válaszoljon a következő kérdésekre:
  * Hol jönnek létre a komponensek könyvtárai?

===== Komponensek törlése =====

Komponens törléséhez a következőt kell tenni:

Hagyományos komponens esetén:
  * Töröljük az **app.modules.ts** fájlban az ngModule függvény, declarations tömbből.
  * Töröljük az **app.modules.ts** fájlban az import sort.

Végül standalone és hagyományos komponens esetén is:
  * Ezek után, töröljük "kézzel" a komponens könyvtárat.






===== ngOnInit =====

A komponensek a Component modul mellett importálnak egy OnInit nevű modult.
Ez lehetővé teszi egy ngOnInit() metódusnak létezését, ami induláskor lefut,
mint a konstruktor. A komponens létrehozásakor ez metódus létre is jön üresen.


==== Változók előkészítése ====

Az ngOnInit betöltéskor fut le. Ha innen szeretnénk előkészíteni 
egy tagváltozót a konstruktor helyett, a fordító panaszkodhat, ha be van állítva a strict mód a
TypeScript fordító számára.

Ehhez hasonló hibaüzenetet kaphatunk:
  property 'valami' has no initializer and is not definitely assigned in the constructor.


A megoldáshoz tagváltozók előkészítéséről kapcsoljuk ki a **strict módot** a **tsconfig.json** fájlban:
  
<code javascript>
{
  "compileOnSave": false,
  "compilerOptions": {
    //...
    "strictPropertyInitialization": true
  },
  "angularCompilerOptions": {
   //...
  }
}
</code>

A felkiáltójel operátort is használhatjuk, amivel a fordítót arról tájékoztatjuk,
hogy ne aggódjon, gondoskodunk a változó előkészítéséről:
<code javascript>
valami!: ValamiTipus
</code>

Ez utóbbi az ajánlott.