How does the angular router work?

Question

Good morning, I’m having doubts about the router of angular2 to pass values to another page... I don’t know how to use it or how it works, can you help? I have seen several examples in forums, but still do not understand what its function is, and how to use it...

Answer 1

Bruno, There are several ways to use the router and pass parameter.

Via the browser route:

In your routing.module:

import { NgModule, ModuleWithProviders} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AgendaConfirmacaoComponent } from './agenda-confirmacao/agenda-confirmacao.component';


const agendaRoutes: Routes = [
  {
    path: 'agendaConfirm/:id',
    component: AgendaConfirmacaoComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(agendaRoutes)],
  exports: [RouterModule]
})
export class AgendaRoutingModule {}

In this code snippet you set up the routing, telling what the route will be, and the :id indicates that you will receive a parameter. You are currently only setting a route that can be used.

In your html or in Component.ts you at some point call this route, I’ll show you two ways:

<a routerLink="/agenda/agendaConfirm" [queryParams]="{id_agendamento: vlb.id}">Abrir</a>

See that I called the routerLink calling the route, and in queryParams I am sending the id of the scheduled named for id_scheduling.

In the.ts component of my schedule confirmation page I get this id this way:

 this.route.queryParams.subscribe(
        (queryParams: any) => {
          this.id_agendamento = queryParams['id_agendamento'];
        });

Note that the name used in queryParams of the routerLink is the same one I used to read this id in the Component.ts.

Another way to redirect to a page by passing parameter is as follows:

this.router.navigate(['/agenda/agendaConfirm', this.idAgendamento]);

This line of code is another alternative to when you are in some method in Component.ts and redirect to the page taking a parameter.

In Component.ts the reading will be as follows, if you choose to use navigate:

id_agendamento = this.route.snapshot.params['id']; 
//o id usado no 'params['id']' é o mesmo que foi nomeado no routing:

const agendaRoutes: Routes = [
      {
        path: 'agendaConfirm/:id',
        component: AgendaConfirmacaoComponent
      },
]; //Essa foi a rota que definimos lá em cima usando agendaConfirm/:id

I hope I’ve helped,

These are the shapes I use the most. Any doubt is just to say that I try to lighten up a little more.