如何在 Angular 中通过路由器时保留选定的值 [英] How to retain a selected value while going through the router in Angular
问题描述
我对 angular 非常陌生(目前我相信我使用的是 angular 2)并且我正在尝试构建一个应用程序，该应用程序将使用户能够选择和自定义一系列产品.为此，我将产品详细信息的 JSON 文件导入到应用程序中，如下所示.
I am very new to angular (currently I believe I am using angular 2) and I'm trying to build an app which will enable a user to select and customise a bundle of products. In order to do this I have imported a JSON file of the product details into the app as follows.
{
"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 类)并创建一个 select 方法，使用户能够选择捆绑包.
My next goal was to import the bundle values into an App component (in this case with the class OrderComponent) and create a select method which would enable a user to select a bundle.
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;
};
我现在的问题是，当我导航到应用程序中的另一个组件时，this.selectedBundle 的值会重置为其默认值 null.
My problem now is that when I navigate to another component in the App the value of this.selectedBundle resets to it's default value of null.
我希望应用记住选择了哪个包，以便我可以在以后使用这些数据.如果有人能指出我如何做到这一点的正确方向，我将不胜感激.
What I would like to happen is that the app remembers which bundle has been selected so that I can use this data at a later point. If anyone could point me in the right direction on how to do this I would greatly appreciate it.
我的路由方法被编码到App Component st 以下
My routing method is coded into the App Component st follows
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
}
])
],
推荐答案
当您从一个路由导航到另一个路由时，一个组件被销毁并启动一个新组件.请注意，如果新路由的组件是第一个组件的子组件，则情况并非如此，但让我们不要深入挖掘这个漏洞.
As you navigate from one route to another, a component is destroyed and a new component is initiated. Note that this is not the case if the newly routed component is a child of the first component but let us not dig deep into this hole.
这个问题的解决方案是拥有一个保持selectedBundle"状态的单例服务.组件中的selectedBundle"现在是一个从服务中获取数据的函数.在您的组件打字稿和 html 中，将 selectedBundle 替换为 selectedBundle() 函数分辨率
The solution to this issue is to have a singleton service that holds the state of of the "selectedBundle". "selectedBundle" in your component now is a function that gets its data form the service. In your component typescript and html replace selectedBundle by the selectedBundle() function resolution
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
}
}
这篇关于如何在 Angular 中通过路由器时保留选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
