Angular 18 Routing

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

Navigáció

Az app.component.html fájlban:

imports: [RouterLink],

src/app/app.component.html

<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

src/app/app.component.html

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

src/app/app.component.ts

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

src/app/app.routes.ts

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 }
];