Question

我正在学习AngularJS2，并在他们的网站上关注我的英雄教程我正在构建一个应用程序，并且我试图了解如何在内存中存储项目。

这是我的组成部分：

@Component({
  selector: 'my-warehouse',
  templateUrl: 'templates/warehouse.component.html',
  styleUrls:  ['css/warehouse.component.min.css']
})
export class WarehouseComponent {

    ingredients: Ingredient[] = [
        {"id": 100, "name": "Milk", "description": "White and delicious.", "quality": 0, "price": 10, "quantity": 20},
        {"id": 101, "name": "Cocoa", "description": "Ready to be processed into sweet chocolate.", "quality": 0, "price": 20, "quantity": 50},
        {"id": 102, "name": "Sugar", "description": "The magic behind the choco.", "quality": 0, "price": 5, "quantity": 10}
    ];

    constructor(
        private _router: Router,
        private _ingredientService: IngredientService){
    }

    addIngredient(){

        var ingr = jQuery.extend({}, this._ingredientService.getIngredient(104));
        ingr.quantity = 15;
        ingr.quality = 0;

        this.ingredients.push(ingr);
    }

}

我有一个名为ingredients的数组，其中已经构造了一些成分，当我使用addIngredient（）时，我从服务中获取另一个成分并将其推送到数组。

问题在于，每当我切换组件并返回到Warehouse组件时，重新组合成分列表，就好像数组从未被修改过，即使成分列表在构造函数之外也是如此。

我做错了吗？文档对此并不十分清楚，我希望得到一些帮助。

由于

Answer 1

有几种方法可以做到这一点：

Eric提供的解决方案。
使用共享服务。特别是如果您想要针对多个组件共享这些数据。在这种情况下，必须在引导应用程序时定义服务，而不是在组件的providers属性中再次指定。
如果您的组件涉及路由，您可以使用CanReuse接口告诉Angular2重用该组件的相同实例。请参阅此文档：https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html

Answer 2

您需要在ingredients中添加IngredientService数组，并将服务添加到bootstrap方法中：

bootstrap(AppComponent, [
    ...,
    IngredientService]);

IngredientService将是一个单身人士，你的成分阵列将不会被重置

Angular 2如何在内存中存储项目

2 个答案: