Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_18_routing [2025/01/30 08:03] – [Angular 18 Routing] admin
+++ oktatas:web:angular:angular_18_routing [2025/03/02 15:58] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:angular|< Angular]]
-====== Angular 18 Routing ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2024, Sallai András
-  * Szerkesztve: 2025
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
-  * Web: https://szit.hu
-===== Navigáció =====
-Az app.component.html fájlban:
-<code javascript>
-imports: [RouterLink],
-</code>
-<code html 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>
-</code>
-<note important>
-A RouterLink importálása nélkül az "a" elemben található szöveg nem
-lesz kattintható!
-</note>
-===== A fő komponensben megjelenítés =====
-Az app.component.html fájlban:
-<code javascript>
-imports: [RouterOutlet],
-</code>
-Így már két bejegyzésünk van:
-<code javascript>
-imports: [RouterOutlet, RouterLink],
-</code>
-Tegyük a link alá:
-<code html>
-<div class="container">
-  <router-outlet></router-outlet>
-</div>
-</code>
-===== Teljes kód =====
-<code html 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>
-</code>
-<code javascript 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';
-}
-</code>
-===== Routing =====
-<code javascript 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 }
-];
-</code>
-===== Átirányítás és nopage =====
-<code javascript>
-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 }
-];
-</code>