[[oktatas:web:angular|< Angular]] ====== Angular routing ====== * **Szerző:** Sallai András * Copyright (c) 2021, Sallai András * Szerkesztve: 2021, 2022, 2023, 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Kezdés ===== Routingot több komponenssel használjuk. A routinggal mondjuk meg, melyik komponens jelenjen meg. A következőt szeretnénk: A böngészőben a tartománynév (domain név, ip cím, pl.: zold.lan) után megadok egy végpontot, akkor egy adott komponens betöltődjön. | first | FirstComponent | | second | SecondComponent | A komponensek elkészítése:


ng generate component first
ng generate component second

Az átirányítást az **app.routing.ts** állományban állítjuk, ami az **src/app/** könyvtárban található. Az állomány tartalma kezdetben:


import { Routes } from '@angular/router';

export const routes: Routes = [];


import { Routes } from '@angular/router';
import { FirstComponent } from './emp/first.component';
import { SecondComponent } from './role/second.component';

export const routes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: 'second', component: SecondComponent }
];

Az alkalmazás fő template komponensébe tesszük a "router-outlet" elemet, és előtte kialakítunk egy navigációt:



  
    
      Első oldal
    
    
      Második

Kattintásra a **router-outlet** elem helyén töltődik be, mindkét komponens lapja. Vegyük észre, hogy az "a" elem nem "href" attribútummal mutat az útvonalra. Ha href attribútumot használunk, az a weblap újratöltéséével jár. Helyette a **routerLink** attribútumot használjuk. ===== Végpontra irányítás ===== ==== HTML felületről ==== A routerLink számára megmondjuk, hogy "/task" útvonalat szeretném hívni:


Task

Az útvonalak végén paramétert is átadhatunk. Paraméterátadással:


Első

==== TypeScriptből ==== Ha valamilyen eseményre szeretnénk egy útvonalat meghívni, a Rotuer osztályt injektáljuk, például route néven, amin keresztül aktiválhatunk egy útvonalat. Importáljuk és injektáljuk a Router osztályt, majd a ''this.route.navigate(['/first']);'' utasítással hivatkozunk /first végpontra.


import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app11';
  constructor(private route:Router) {
  }
  ngOnInit():void {
  }
  goFirst():void {
    this.route.navigate(['/first']);
  }
}

==== Paraméterátadás ==== Átadhatunk egy paramétert is, például azonosítót:


onClickElement(task: Task): void {
    this.router.navigate(['task', task.id]);
}

Most vegyünk egy listát, ahol bármely elemre kattintva szeretném átadni a választott elemhez tartozó összes tulajdonságot. Az onClickElement függvény dolgozza fel a kattintást, a következő módon hívjuk:



    
        
           {{ task.id }}  {{ task.name }}

Így bármelyik listaelemre kattintva átadom a listaelemet a metódusnak. Az azonosítót a következő módon fogadhatjuk routing oldalon:


  { path: 'task/:id', component: TaskComponent },

Nézzünk egy lehetséges komplexebb példát:


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

===== 404 ===== Az Angular v2.2.2 vagy újabb verzió esetén wildcard karaktereket használhatunk, a meg nem határozott útvonalakhoz. | ** | FileNotFound | Ennek a bejegyzésnek mindig a végén kell szerepelni, mert ha erre az útvonalra rátalál a script, a többit már nem nézi meg.


const routes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: '**', component: Filenotfound },
];

==== Bővebb példa ====


const routes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: NopageComponent }
];

===== Routing alkönyvtárakkal =====


//...

const routes: Routes = [
  {
    path: 'admin', component: AdminComponent,
    children: [
      {path: 'login', component: LoginComponent},
      {path: 'products', component: ProductsComponent,  canActivate: [AuthGuard]}      
    ]
  },
  {
    path: '', component: WebsiteComponent,
    children: [
      { path: 'buy', component: BuyComponent }
    ]
  }
];

//...

===== Függelék ===== ==== Feladatok teljes kód ====


export interface Task {
    id: number;
    name: string;
}


import { Task } from "./task";

export const TASKS: Task[] = [
    {
        id: 1,
        name: "Angular tanulás"
    },
    {
        id: 2,
        name: "React Native tanulás"
    },
    {
        id: 3,
        name: "Adatabázis tanulás"
    },

];


Feladatok


    
        
           {{ task.id }}  {{ task.name }}


import { Component, OnInit } from '@angular/core';
import { TASKS } from '../tasks.storage';
import { Task } from '../task';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {
  
  tasks!: Task[];
  
  constructor(private router: Router) { }

  ngOnInit(): void {
    this.tasks = TASKS;
  }

  onClickElement(task: Task): void {
    this.router.navigate(['task', task.id])
  }
}


{{ tasks.id }} {{ tasks.name }}

Vissza


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Task } from '../task';
import { TASKS } from '../tasks.storage';


@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent implements OnInit {

  tasks!: Task;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    const id = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    if (id) {
      this.tasks = TASKS.filter(task => task.id == id)[0];
    }
  }
}