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

Question

到目前为止,我还没有找到一个如何在Angular 2中将数据推送到数组的简单示例.在AngularJs中它很容易(示例),但我在Angular 2中正在努力,可能是因为我使用的是路由器我不知道如何配置它(我跟随角度英雄的例子).

我想做什么,整个解决方案:

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-110个产品,这是显而易见的,但如果我按下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并加载更多的产品,并返回后Products-1,我可以在多个相同类型的请求被发送到我的服务器我的网络选项卡上看到的.

所以我的问题是:

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

Answer 1

我会添加/更改以下几项内容product.ts:

1. 在您的属性下添加这些属性index: number = 0;:

   class_id: string;  
   type_id: string;
   

2. route.paramMap.subscribe从中删除constructor

3. 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();
     });   
   }
   

4. 最后,loadProducts():

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