如何在使用类似路径时将数据推入Angular 2中的数组

到目前为止,我还没有找到一个简单的例子,说明如何将数据推入Angular 2中的数组.在AngularJs中它很容易( example),但我在Angular 2中努力争取它,可能是因为我使用的是路由器我不知道如何配置它(我跟随角度 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>

那么,这里有什么问题：如果我去产品-1我会得到10个产品,这是显而易见的,但是如果我按下显示更多,那么前10个产品将被删除,另外10个产品被显示 – 这也是显而易见的,所以对避免这种情况并保持前10并加载10,我更换了Product.ts – > this.products =产品;至：

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

现在出现另一个问题：当我转到Product-2时,Products-1中的产品与Product-2的产品一起显示,所以为了避免这种情况,我将这两行添加到Product.ts构造函数中：

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

现在,一切正常,但是：当我从Products-1转到Products-2并加载更多产品,然后返回到Products-1之后,我可以在我的网络选项卡中看到多个相同类型的请求被发送到我的服务器.

所以我的问题是：

>使用路由时是否有更好的方法来推送数据,并避免重置构造函数中的参数？
>如果推入数组是可以的,并且如果可以在构造函数中重置参数,那么,从一条路径到另一条路径时如何避免多个请求？

class_id: string;  
type_id: string;

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(): void {
  this.productsService.getProducts(this.class_id,this.type_id,this.numberOfObjectsPerPage).then(
    productArray => {
         this.products = this.products.concat(productArray);
    })
}