角を使ってルータを通過する際に選択した値を保持する方法

Question

私は非常に角度が新です（現在私は角度2を使用していると思います）。一束の製品。これを行うために、私は以下のようにアプリケーションに製品の詳細のJSONファイルをインポートしました。

{ 
    "data": { 
     "adverts": [], 
     "bundles": [{ 
      "id": "1", 
      "name": "Bronze Bundle", 
      "price": { 
       "installation": "99.99", 
       "recurring": "23.99" 
      }, 
      "products": ["1", "2", "3", "4", "9", "10", "15", "15"] 
     }, { 
      "id": "2", 
      "name": "Silver Bundle", 
      "price": { 
       "installation": "99.99", 
       "recurring": "23.99" 
      }, 
      "products": ["1", "2", "2", "2", "2", "4", "9", "10", "15", "15"] 
     }, { 
      "id": "3", 
      "name": "Gold Bundle", 
      "price": { 
       "installation": "99.99", 
       "recurring": "25.99" 
      }, 
      "products": ["1", "2", "4", "5", "9", "10", "15", "15"] 
     }, { 
      "id": "4", 
      "name": "Build Your Own Bundle", 
      "price": { 
       "installation": "49.99", 
       "recurring": "9.99" 
      }, 
      "products": ["1", "10"] 
     }], 
     "products": [{ 
      "id": "1", 
      "name": "Product 1", 
      "price": { 
       "upfront": null, 
       "installation": "0.00", 
       "recurring": "0.00" 
      } 
     }, { 
      "id": "3", 
      "name": "Product 3", 
      "price": { 
       "upfront": "132.00", 
       "installation": "9.60", 
       "recurring": "2.75" 
      } 
     }, { 
      "id": "4", 
      "name": "Product 4", 
      "price": { 
       "upfront": "60.00", 
       "installation": "9.60", 
       "recurring": "1.25" 
      } 
     }, { 
      "id": "2", 
      "name": "Product 2", 
      "price": { 
       "upfront": "60.00", 
       "installation": "9.60", 
       "recurring": "1.25" 
      } 
     },{ 
      "id": "5", 
      "name": "Product 5", 
      "price": { 
       "upfront": "228.00", 
       "installation": "9.60", 
       "recurring": "4.75" 
      } 
     }, { 
      "id": "6", 
      "name": "Product 6", 
      "price": { 
       "upfront": "96.00", 
       "installation": "9.60", 
       "recurring": "2.00" 
      } 

     }] 
    } 
} 

私の次の目標は、（クラスOrderComponentこの場合の）アプリケーションコンポーネントにバンドル値をインポートし、バンドルを選択することをユーザに可能にする選択方法を作成することでした。

import { Component, Input, OnInit } from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 

import { Bundle } from './bundle'; 
import { Peripherals } from './peripherals'; 
import { OrderInfo } from './order.service'; 

@Component({ 
    selector: 'my-order', 
    template: ` 
     <h1>Select Bundle</h1> 
     <ul class="bundles"> 
     <li *ngFor="let bundledata of Bundle" 
     [class.selected]="bundledata === selectedBundle" 
      (click)="onSelect(bundledata)" > 
      <h2>{{bundledata.id}}: {{bundledata.name}}</h2> 
      <p>{{bundledata.description}}</p> 

     </li> 
     </ul> 
     <bundle-detail [bundle]="this.selectedBundle"></bundle-detail> 

    `, 

    providers: [OrderInfo] 
}) 

export class OrderComponent { 
    constructor(private orderInfo: OrderInfo) { } 
    selectedBundle: Bundle; 
    Bundle: {}; 

    getBundles(): void { 
     this.Bundle = this.orderInfo.getBundles(); 
    } 

     ngOnInit(): void { 
     this.getBundles(); 
     } 
    onSelect(bundledata: Bundle): void { 
     this.selectedBundle = bundledata; 
    }; 

私の問題は、今私はアプリケーション内の別のコンポーネントに移動したときに、それがnullのデフォルト値だとthis.selectedBundleの値がリセットされていることです。

私は、アプリケーションが後でこのデータを使用できるように選択されたバンドルを覚えています。もし誰かがこれをどうやって正しい方向に向けることができたら、私はそれを高く評価します。

マイルーティング方法は、アプリケーションコンポーネントSTが

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

import { Bundle } from './bundle'; 
import { Peripherals } from './peripherals'; 
import { OrderInfo } from './order.service'; 



@Component({ 
    selector: 'my-app', 
    template: ` 
    <nav> 
     <a routerLink="/dashboard">Dashboard</a> 
     <a routerLink="/order">Order</a> 
     <a routerLink="/customise">Customise Bundle</a> 
    </nav> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
    title = 'Bundle App'; 

} 

、これはアプリケーションモジュールで参照される

NgModule({ 
    imports:  [  
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
      path: '', 
      redirectTo: '/dashboard', 
      pathMatch: 'full' 
     }, 
     { 
      path: 'dashboard', 
      component: DashboardComponent 
     }, 
     { 
      path: 'order', 
      component: OrderComponent 
     }, 
     { 
      path: 'customise', 
      component: ProductDetailComponent 
     } 
     ]) 
], 

Answer 1

あなたは別の経路から移動したように、成分が破壊され、以下に符号化されます新しいコンポーネントが開始されます。これは、新しくルーティングされたコンポーネントが最初のコンポーネントの子であるが、この穴に深く掘り下げないようにする場合には当てはまりません。

この問題の解決策は、 "selectedBundle"の状態を保持するシングルトンサービスを持つことです。コンポーネントのselectedBundleは、データをサービスから取得する関数です。コンポーネントのtypescriptですとHTMLでselectedBundle（でselectedBundleを置き換える）関数解決

export class OrderComponent { 
constructor(private orderInfo: OrderInfo 
      private bundleService: BundleService 
) { } 
Bundle: {}; 

getBundles(): void { 
    this.Bundle = this.orderInfo.getBundles(); 
} 

ngOnInit(): void { 
    this.getBundles(); 
} 
onSelect(bundledata: Bundle): void { 
    this.bundleService.setSelected(bundledata) 
}; 
selectedBundle(){ 
    return this.bundleService.getSelected() 
} 

は、ここで新しいサービス

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


@Injectable() 

export class BundleService { 
    selectedBundle: Bundle 
    setSelected(bundledata: Bundle) { 
     this.selectedBundle = bundledata; 
    } 


    getSelected() { 
     return this.selectedBundle 
    } 



}