typescript - Angular 2 - ActivatedRoute don't carry data -
i followed tutorial on angular website , fine. however, tried create project same patterns, can't pass data through activatedroute.
here's code :
app.module.ts
import { browsermodule } '@angular/platform-browser'; import { appcomponent } './app.component'; import { levelservice } './level.service'; import { routermodule } '@angular/router' import { ngmodule } '@angular/core'; import { levelcomponent } './level.component'; import { selectorcomponent } './selector.component'; @ngmodule({ imports: [ browsermodule, routermodule.forroot([ { path: '', redirectto: '/selector', pathmatch: 'full' }, { path: 'selector', component: selectorcomponent }, { path: 'level/:id', component: levelcomponent } ]) ], declarations: [ appcomponent, selectorcomponent, levelcomponent ], bootstrap: [ appcomponent ], providers: [ levelservice ], }) export class appmodule { }
app.component.ts
import { component } '@angular/core'; @component({ moduleid: module.id, selector: 'my-app', template: ` <h1>{{title}}</h1> <router-outlet></router-outlet> `, }) export class appcomponent { title = 'my app'; }
selector.component.ts
import { component } '@angular/core'; import { level } './level'; import { levelcomponent } './level.component'; import { levelservice } './level.service'; import { oninit } '@angular/core'; import { router } '@angular/router'; @component({ moduleid: module.id, selector: 'my-selector', template:` <h3>selector</h3> <a *ngfor="let level of levels" (click)="gotolevel(level)"> <div> <h4>level : {{level.id}}</h4> </div> </a> ` }) export class selectorcomponent implements oninit { levels: level[]; constructor (private router: router, private levelservice: levelservice) {} getlevels(): void { this.levelservice.getlevels().then(levels => this.levels = levels); } ngoninit(): void { this.getlevels(); } gotolevel(level: level): void { this.router.navigate(['/level', level.id]); } }
level.service.ts
import { injectable } '@angular/core'; import { level } './level'; import { levels } './mock-levels'; @injectable() export class levelservice { getlevels(): promise<level[]> { return promise.resolve(levels); } getlevel(id: number): promise<level> { return this.getlevels().then(levels => levels.find(level => level.id === id)); } }
level.component.ts
import { component, input, oninit } '@angular/core'; import { level } './level'; import { activatedroute, params } '@angular/router'; import { location } '@angular/common'; import { levelservice } './level.service'; import 'rxjs/add/operator/switchmap'; @component({ moduleid: module.id, selector: 'my-level', template: ` <h3>level {{level.id}}<h3> <button (click)="goback()">back</button> ` }) export class levelcomponent implements oninit{ @input() level: level; constructor (private levelservice: levelservice, private route: activatedroute, private location: location){} ngoninit():void { this.route.params.switchmap((params: params) => this.levelservice.getlevel(+params['id'])).subscribe(level => this.level = level); } goback():void { this.location.back(); } }
level.ts
export class level { id: number; }
mock-levels.ts
import { level } './level'; export const levels: level[] = [ {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}, ];
your code seems fine, reason think of change detection may not kicking in. try changing template ensure after level object template rendered:
@component({ moduleid: module.id, selector: 'my-level', template: ` <div *ngif="level"> <h3>level {{level?.id}}<h3> <button (click)="goback()">back</button> </div> ` }) export class levelcomponent implements oninit{
Comments
Post a Comment