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
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/