각도로 라우터를 통과하는 동안 선택된 값을 유지하는 방법

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의 값이 재설정한다는 것입니다.

내가 원하는 것은 이후에이 데이터를 사용할 수 있도록 앱이 선택된 번들을 기억한다는 것입니다. 누구든지이 일을하는 방법에 대해 올바른 방향으로 나를 지적 할 수 있다면 크게 감사하겠습니다.

내 라우팅 방법은 응용 프로그램 구성 요소 일에 코딩

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"은 데이터 형식의 서비스를 가져 오는 함수입니다. 구성 요소 타이프 스크립트와 HTML에서 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() 
} 

에 의해 selectedBundle을 대체하는 새로운 서비스

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


@Injectable() 

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


    getSelected() { 
     return this.selectedBundle 
    } 



}