使用类似路由时如何将数据推送到 Angular 2 中的数组

Question

到目前为止，我还没有在Angular 2中找到一个简单的例子来说明如何将数据推入数组。在AngularJs中很容易（example), but I'm struggling for it in Angular 2, maybe because I'm using router and I don't know how to configure it (I was following the angular heroes example）。

我想做的，整个解决方案：

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule } from '@angular/http';
import { ProductsService } from '../services/ProductsService';


import { AppComponent } from "./components/app";
import { Products } from "./components/products";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            {
                path: 'products/:class_id/:type_id',
                component: Products
            }
        ], { useHash: true })
    ],
    exports: [RouterModule],
    declarations: [
        AppComponent
        Products
    ],
    providers: [
        ProductsService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent.ts

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

@Component({
    selector: "my-app",
    template: `<div>
                <a [routerLink]="['/products', 1, 1]">Products-1</a>
                <a [routerLink]="['/products', 2, 2]">Products-2</a>
               </div>`
})
export class AppComponent{}

ProductsService.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class ProductsService {

    private headers = new Headers({ 'Content-Type': 'application/json' });

    constructor(private http: Http) { }

    getProducts(class_id: string, type_id: string, index: number, numberOfObjectsPerPage: number): Promise<any> {
        return this.http.get('Home/GetProducts?pageIndex=' + index +'&classId=' + class_id + '&typeId=' + type_id)
            .toPromise()
            .then(response => response.json() as any)
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

Product.ts

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import * as $ from 'jquery';

import { ProductsService } from '../../services/ProductsService';
import { Product } from '../../common/models/Product';

@Component({
    selector: 'products',
    templateUrl: 'Products.html',
})
export class Products implements OnInit {
    products: Array<Product> = [];
    numberOfObjectsPerPage: number = 10;
    index: number = 0;
    constructor(
        private productsService: ProductsService,
        private route: ActivatedRoute
    ) {}

    ngOnInit(): void {
        this.loadProducts();
    }

    loadProducts():void{
        this.route.paramMap
            .switchMap((params: ParamMap) =>
                this.productsService.getProducts(params.get('class_id'), params.get('type_id'), this.index, this.numberOfObjectsPerPage))
            .subscribe(products => {
                this.products = products;
        });
    }

    showMore():void{
        this.index++;
        this.loadProducts();
    }
}

Products.html:

<div class="product" *ngFor="let product of products;">
  {{ product.name }}
</div>
<button (click)="showMore()">Show more</button>

所以，这里有什么问题：如果我转到 Products-1，我得到 10 个产品，这很明显，但是如果我按 Show more，那么前 10 个产品被删除，另外 10 个显示 - 这又是显而易见的，所以为了避免这种情况并保留前 10 个并再加载 10 个，我将 Product.ts -> this.products = products; 替换为：

 for (let i = 0; i < products.length; i++) {
  this.products.push(products[i]);
 }

现在出现另一个问题：当我转到Product-2时，Products-1的产品与Product-2的产品一起显示，为了避免这种情况，我添加了这两个行进入 Product.ts constructor:

constructor(private productsService: ProductsService, private route: ActivatedRoute) {
        route.paramMap.subscribe(params => this.products = []);
        route.paramMap.subscribe(params => this.index = 0);
}

现在，一切正常，除了：当我从 Products-1 到 Products-2 并加载更多产品时，然后 return 到 Products-1，我可以在我的网络选项卡中看到多个相同类型的请求正在发送到我的服务器。

所以我的问题是：

有没有更好的方法在使用路由时推送数据，避免在构造函数中重新设置参数？
如果压入数组是可以的，如果在构造函数中重新设置参数是可以的，那么，如何避免从一个路由到另一个路由时的多次请求？

Answer 1

在Product.ts:

   import 'rxjs/add/operator/switchMap';
    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { ActivatedRoute, ParamMap } from '@angular/router';
    import * as $ from 'jquery';

    import { ProductsService } from '../../services/ProductsService';
    import { Product } from '../../common/models/Product';

    @Component({
        selector: 'products',
        templateUrl: 'Products.html',
    })
    export class Products implements OnInit, OnDestroy {
        subscribe:any;
        products: Array<Product> = [];
        numberOfObjectsPerPage: number = 10;
        index: number = 0;
        constructor(
            private productsService: ProductsService,
            private route: ActivatedRoute
        ) {}

        ngOnInit(): void {
            this.loadProducts();
        }

        loadProducts():void{
            this.subscribe=this.route.paramMap
                .switchMap((params: ParamMap) =>
                    this.productsService.getProducts(params.get('class_id'), params.get('type_id'), this.index, this.numberOfObjectsPerPage))
                .subscribe(products => {
                    this.products = this.products.concat(products);
            });
        }

        showMore():void{
            this.index++;
            this.loadProducts();
        }
        ngOnDestroy():void{
            this.subscribe.unsubscribe();
}

    }

基本上使用取消订阅方法；

Answer 2

在 product.ts 中我会 add/change 做几件事：

在您的 index: number = 0; 属性下添加这些属性：
```
class_id: string;  
type_id: string;
```
从 constructor

route.paramMap.subscribe

ngOnInit，应该是这样的：

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    this.products = [];
    this.index = 0;
    this.type_id = params.get('type_id');
    this.class_id = params.get('class_id');
    this.loadProducts();
  });   
}

最后，loadProducts():

loadProducts(): void {
  this.productsService.getProducts(this.class_id, this.type_id, this.index, this.numberOfObjectsPerPage).then(
    productArray => {
         this.products = this.products.concat(productArray);
    })
}

使用类似路由时如何将数据推送到 Angular 2 中的数组

How to push data into array in Angular 2 when using similar route

angular2-routing

angular2-services

angular