Angular.io Routing

app-routing.module.ts: Routing module

ng generate module app-routing --flat --module=app

–flat puts the file in src/app instead of its own folder.
–module=app tells the CLI to register it in the imports array of the AppModule.

app-routing.module.ts: Delete the @NgModule.declarations and CommonModule. Import Routes and RouterModule.

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

You intend to navigate to the HeroesComponent when the URL is something like localhost:4200/heroes.

import { HeroesComponent }      from './heroes/heroes.component';
...
const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];
...
imports: [ RouterModule.forRoot(routes) ],

app.component.html Replace the < app-heroes> element with a < router-outlet> element. The < router-outlet> tells the router where to display routed views. Add navigation link

< h1>{{title}}< /h1>
< nav>
  < a routerLink="/heroes">Heroes< /a>
< /nav>
< router-outlet>< /router-outlet>
< app-messages>< /app-messages>

ng generate component dashboard

app-routing.module.ts: Default route to dashboard

  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

heroes/heroes.component.html: Delete herodetails
app-routing.module.ts: Add route to herodetails

  { path: 'detail/:id', component: HeroDetailComponent },

dashboard/dashboard.component.html: Hero links (interpolation binding)

< a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">

heroes/heroes.component.html: Replace onselect with links

 < li *ngFor="let hero of heroes">
    < a routerLink="/detail/{{hero.id}}">
      < span class="badge">{{hero.id}}< /span> {{hero.name}}
    < /a>

 

hero-detail/hero-detail.component.ts Make routeable

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { HeroService }  from '../hero.service';
...
constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}
...
ngOnInit(): void {
  this.getHero();
}

getHero(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

HeroService: Add method getHero

getHero(id: number): Observable {
  // Todo: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

Note the backticks ( ` ) that define a JavaScript template literal for embedding the id.

hero-detail/hero-detail.component.html: Back button

< button (click)="goBack()">go back< /button>

hero-detail/hero-detail.component.ts goBack method

goBack(): void {
  this.location.back();
}

Administrar URLs

Lectura de parámetros

import { ActivatedRoute } from '@angular/router';
...
constructor(protected route: ActivatedRoute) {
...
ngOnInit() {
  this.route.queryParams.subscribe(
      params => {
        //lectura de parametros de la url (los que se encuentran luego del caracter "?")
      }
  );
}

Definición de parámetros

import { ActivatedRoute } from '@angular/router';
...
constructor(protected route: ActivatedRoute) {
...
ngOnInit() {
  this.router.navigate(['/asignatura-show'],  {queryParams: {email: "unemail", code: "uncodigo"}});

  this.route.queryParams.subscribe(

      params => {
        //lectura de parametros de la url (los que se encuentran luego del caracter "?")
      }
  );
}

Más Información

Tutorial

Interpolation binding

template literals

The ActivatedRoute holds information about the route to this instance of the HeroDetailComponent. This component is interested in the route’s bag of parameters extracted from the URL. The “id” parameter is the id of the hero to display.

The location is an Angular service for interacting with the browser. You’ll use it later to navigate back to the view that navigated here.

https://alligator.io/angular/query-parameters/