< Angular

Angular 18 Routing

Szerző: Sallai András

Copyright © 2024, Sallai András

Szerkesztve: 2025

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Navigáció

Az app.component.html fájlban:

imports: [RouterLink],
<nav> <ul class="nav"> <li class="nav-item"> <a routerLink="/" class="nav-link">Dolgozók</a> </li> <li class="nav-item"> <a routerLink="/pos" class="nav-link">Beosztások</a> </li> </ul> </nav>
A RouterLink importálása nélkül az „a” elemben található szöveg nem lesz kattintható!

A fő komponensben megjelenítés

Az app.component.html fájlban:

imports: [RouterOutlet],

Így már két bejegyzésünk van:

imports: [RouterOutlet, RouterLink],

Tegyük a link alá:

<div class="container"> <router-outlet></router-outlet> </div>

Teljes kód

<nav> <ul class="nav"> <li class="nav-item"> <a routerLink="/" class="nav-link">Dolgozók</a> </li> <li class="nav-item"> <a routerLink="/pos" class="nav-link">Beosztások</a> </li> </ul> </nav> <div class="container"> <router-outlet></router-outlet> </div>
import { Component } from '@angular/core'; import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, RouterLink], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'app06'; }

Routing

import { Routes } from '@angular/router'; import { EmpComponent } from './emp/emp.component'; import { PosComponent } from './pos/pos.component'; export const routes: Routes = [ { path: '', component: EmpComponent }, { path: 'pos', component: PosComponent } ];