角2 - ActivatedRouteはデータを持ちません

Question

私は角度のウェブサイト上のチュートリアルに続き、すべてがうまくいきました。 しかし、同じパターンの別のプロジェクトを作成しようとしましたが、ActivatedRouteでデータを渡すことはできません。

ここでは、コードです：

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import { LevelService } from './level.service'; 
import { RouterModule } from '@angular/router' 

import { NgModule }  from '@angular/core'; 
import { LevelComponent } from './level.component'; 
import { SelectorComponent } from './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 } from '@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 } from '@angular/core'; 
import { Level } from './level'; 
import { LevelComponent } from './level.component'; 
import { LevelService } from './level.service'; 
import { OnInit } from '@angular/core'; 
import { Router } from '@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]); 
    } 

} 

レベル。 service.ts

import { Injectable } from '@angular/core'; 

import { Level } from './level'; 
import { LEVELS } from './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 } from '@angular/core'; 
import { Level } from './level'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location } from '@angular/common'; 
import { LevelService } from './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; 
} 

モックlevels.ts

import { Level } from './level'; 

export const LEVELS: Level[] = [ 
    {id: 1}, 
    {id: 2}, 
    {id: 3}, 
    {id: 4}, 
    {id: 5}, 
    {id: 6}, 
]; 

Answer 1

あなたのコードは罰金だ、唯一の理由I考えることができるのは、変化の検出が蹴られていない可能性があるということです。テンプレートがレンダリングされていることをあなたのレベルのオブジェクトを取得した後に確認するために、このようなあなたのテンプレートをnging：

@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{ 

Answer 2

あなたはこのようActivatedRouteとルータを使用することができます。

import { Component, OnInit } from '@angular/core'; 
import { Router ,ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'app-sub-cat', 
    templateUrl: './sub-cat.component.html', 
    styleUrls: ['./sub-cat.component.css'] 
}) 
export class SubCatComponent { 
    public category={}; 
    constructor(private route:ActivatedRoute ,private router:Router){ 
    } 
    onClickCategory(item){ 
    this.router.navigate(['shipping-details', {data: item.id}]); 
    sessionStorage.setItem(item.id, JSON.stringify(item)); 
    } 
    ngOnInit() { 
    this.category =JSON.parse(sessionStorage.getItem(this.route.snapshot.params['data'])); 
    } 

}