如何在Angular

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"
            }

        }]
    }
}

我的下一个目标是将捆绑值导入App组件（在本例中为OrderComponent类），并创建一个select方法，使用户可以选择捆绑包。

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;
    };

我现在的问题是，当我导航到App中的另一个组件时，this.selectedBundle的值会重置为它的默认值null。

我想要发生的是应用程序会记住选择了哪个捆绑包，以便我可以在以后使用这些数据。如果有人能指出我正确的方向，我会非常感激。

我的路由方法被编码到以下的应用程序组件中

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';

}

，这在App Module中引用

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

当您从一条路线导航到另一条路线时，会销毁一个组件并启动一个新组件。请注意，如果新路由的组件是第一个组件的子组件，但不允许我们深入挖掘此漏洞，则情况并非如此。

此问题的解决方案是拥有一个单独的服务，该服务保存＆＃34; selectedBundle＆＃34;的状态。 ＆＃34; selectedBundle＆＃34;在您的组件中现在是一个从服务中获取其数据的函数。在你的组件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
     }



}