Angular routing

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

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.

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:

src/app/app.routing.ts

import { Routes } from '@angular/router';
 
export const routes: Routes = [];

src/app/app-routing.module.ts

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:

src/app/app.component.html

<nav>
  <ul>
    <li>
      <a routerLink="/first">Első oldal</a>
    </li>
    <li>
      <a routerLink="/second">Második</a>
    </li>
  </ul>
</nav>
 
<router-outlet></router-outlet>

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.

A routerLink számára megmondjuk, hogy „/task” útvonalat szeretném hívni:

<a routerLink="/task">Task</a>

Az útvonalak végén paramétert is átadhatunk.

Paraméterátadással:

<a routerLink="/task/1">Első</a>

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.

src/app/app.component.ts

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

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

<ul class="list-group">
    <li *ngFor="let task of tasks" 
    class="list-group-item"
    (click)="onClickElement(task)">
       <span class="badge bg-primary rounded-pill"> 
           {{ task.id }} </span> {{ task.name }} 
    </li>
</ul>

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

Az Angular v2.2.2 vagy újabb verzió esetén wildcard karaktereket használhatunk, a meg nem határozott útvonalakhoz.

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

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

app-routing-module.ts

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

A szülőkomponensekben el kell helyeznünk a router-outlet elemet:

src/app/admin/admin.component.html

<router-outlet></router-outlet>

src/app/buy/buy.component.html

<router-outlet></router-outlet>

src/app/task.ts

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

src/app/tasks.storage.ts

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

src/app/tasks/tasks.component.html

<p>Feladatok</p>
 
<ul class="list-group">
    <li *ngFor="let task of tasks" 
    class="list-group-item"
    (click)="onClickElement(task)">
       <span class="badge bg-primary rounded-pill"> 
           {{ task.id }} </span> {{ task.name }} 
    </li>
</ul>

src/app/tasks/tasks.component.ts

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

src/app/task/task.component.html

<p>{{ tasks.id }} {{ tasks.name }}</p>
 
<a routerLink="/tasks">Vissza</a>

src/app/task/task.component.ts

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