This is my "app.routing.ts":
import {provideRouter, RouterConfig} from "@angular/router";
import {DashboardComponent} from "./dashboard.component";
import {HeroesComponent} from "./heroes.component";
import {HeroDetailsComponent} from "./hero-details.component";
export const routes: RouterConfig = [
{path: '', component: DashboardComponent },
{path: 'dashboard', component: DashboardComponent },
{path: 'heroes', component: HeroesComponent },
{path: 'details/:id', component: HeroDetailsComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
This is the page I wish to load by typing the URL:
import {Component, OnInit} from "@angular/core";
import {Router, ActivatedRoute} from "@angular/router";
import {Hero} from "./hero.class";
import {HeroService} from "./hero.service";
@Component({
selector : "my-hero-details",
template : `
<div *ngIf="myhero">
<h2>{{myhero.name}} details!</h2>
<div><label>id: </label>{{myhero.id}}</div>
<div>
<label>name: </label>
<input id="heroname" [(ngModel)]="myhero.name" placeholder="name">
</div>
</div>
<button (click)="goBack()">Back</button>
`,
providers : [HeroService]
})
export class HeroDetailsComponent implements OnInit{
myhero:Hero;
sub:any;
ngOnInit(){
this.getHeroDetails();
}
ngOnDestroy(){
this.sub.unsubscribe();
}
constructor(private heroService:HeroService, private router:Router, private route:ActivatedRoute){}
getHeroDetails(){
this.sub = this.route.params.subscribe((param)=>{
let id:number = +param["id"];
//let id:number = +this.route.snapshot.params["id"];
this.heroService.getHero(id).then((hero)=>{
this.myhero = hero;
});
});
}
goBack(){
window.history.back();
}
}
A challenge arises when I enter the URL ".../details/12" with 12 as the ID. However, if I navigate to that page by clicking a button triggering the following code, it functions properly:
this.router.navigate(["/details", this.selectedHero.id]);
I'm not utilizing any server, instead, I am using "system.config.js" from Angular2 QuickStart, potentially causing an issue like "Uncaught ReferenceError: System is not defined".