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

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -