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

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>

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>

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

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

export const routes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'task/:id', component: TaskComponent },
  { path: 'tasks', component: TasksComponent },
  { path: 'home', component: HomeComponent },  
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: NopageComponent }
];