< Angular

Angular - beépített komponens

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

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

Projekt létrehozása

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.

Beépítés

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

//... import { JarmuComponent } from './jarmu/jarmu.component'; //... @Component({ //... imports: [RouterOutlet,JarmuComponent], //... })
<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.

Másik komponens

ng generate component comp2

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

<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.

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