Angular - beépített komponens

• Szerző: Sallai András
• Copyright © 2022, Sallai András
• Szerkesztve: 2022, 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Routing nélkül a komponenseknek csak egymásba építve van értelme.

Hozzunk létre egy projektet app01 néven, majd benne egy comp1 nevű komponenst.

ng new app01 --routing false
cd app01
ng generate component comp1

Az app01 projektet routing nélkül lett létrehozva.

A comp1 komponenst beépítjük az app komponensbe:

src/app/app.component.html

//...
import { JarmuComponent } from './jarmu/jarmu.component';
//...
 
@Component({
//...
  imports: [RouterOutlet,JarmuComponent],
//...
})

src/app/app.component.html

<h1>Valmai</h1>
 
<app-comp1></app-comp1>

Ahova szeretném beépíteni, egy olyan HTML elemet készítek, aminek a neve app szóval kezdődik, majd kötőjel után a komponensünk neve, ahogy azt a példában is látjuk.

ng generate component comp2

A comp2 komponenst is beépítjük az app komponensbe:

src/app/app.component.html

<h1>Valmai</h1>
 
<app-comp1></app-comp1>
 
<app-comp2></app-comp2>

Az app komponens helyett egy komponens beépíthető a másik komponensbe is.

src/app/comp1/comp1.component.html

<p>comp1 works!</p>
 
<app-comp2></app-comp2>