使用 JQuery 和 Angular2 进行多个 ajax 调用的巧妙方法答案

【问题标题】：Neat way of making multiple ajax calls with JQuery and Angular2使用 JQuery 和 Angular2 进行多个 ajax 调用的巧妙方法
【发布时间】：2016-08-15 00:35:32
【问题描述】：

我有以下 angular2 组件，它进行 ajax 调用（使用 Jquery）并将模板 html 设置为结果的值：

注意：我正在使用 Typescript

import { Component, Input } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {SafeResourceUrl} from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
declare var $: any; //Jquery declare

@Component({
    selector: 'codestep',
    template: `<div class="codestep" [innerHTML]="content"></div>`
})
export class codeStepComponent {
    @Input() step: string;
    private sub: Subscription;
    private content: string = '';
    private url: SafeResourceUrl;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.content = this.step;
            var that = this;
            var _url = './diff/' + this.step + '.html';
            $.ajax({
                url: _url,
                success: function (result) {
                    that.content = result;
                    console.log("content: " + result);
                }
            });
        });
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

我怎样才能巧妙地修改它以进行额外的 ajax 调用（到不同的 url）并为此设置不同的属性？我可以创建一个不同的子，然后拥有一整套新的类属性，然后设置一个新的订阅等。即我目前拥有的行数的两倍。如果我必须进行 5 次以上的调用，这不是一个好方法，我可以重用一些逻辑并整理此提案吗？

【问题讨论】：

您是否尝试将参数传递给ngOnInit？
@guest271314 这将如何运作？如果我需要多个 ajax 调用，ngonInit 不是只被调用一次吗？
您是否尝试在一次调用ngOnInit 时执行多个ajax 调用？还是在不同场合多次通话？
@guest271314 多次调用单个 ngOnInit。
每个请求的success 应该发生什么？或者，完成所有请求？会覆盖that.content = result; 的内容还是应该使用.append()？

标签： javascript jquery ajax node.js angular

【解决方案1】：

您可以创建要请求的 URL 数组，使用 $.when()、$.map()、.then()、$.each() 来处理返回的响应

var urls = ["a", "b", "c", "d", "e"];

$.when.apply($, $.map(urls, function(curr) {
  return $.ajax("./diff/" + curr + ".html")
}))
.then(function(...response) {
  $.each(response, function(key, value) {
    var result = value.shift();
    // do stuff with returned `result` here
    // e.g., `that.content = result`
  })
});

plnkrhttp://plnkr.co/edit/VYwE9Xo4LQh352MlH2yW?p=preview

【讨论】：