Question

我的第1页是非角度页面。我的要求：单击此页面的搜索按钮，将会点击一个API，该API将从JSON API获取数据。为了实现这一目标，我必须将搜索查询传递给JSON API。 Web服务命中的结果必须在下一页（结果页面）上显示，该页面将使用角度2进行渲染。所以这里没有ajax。我的Angular 2页面如何接收JSON数据结果？如何实现从服务器到角度应用程序页面的重定向以及在此页面上处理json数据？

如果我仅对角度应用页面的结果进行http ajax点击，如何将搜索查询以json格式传递给api，因为搜索查询位于第一个（非角度）页面上？

search.jsp-非角度页面。 ActionURL将我带到结果页面，其中我的搜索查询与城市将在SEARCH_QUERY_ATTRIBUTE中的请求属性服务器端设置，并且将返回result.jsp页面。

<form name="search" action="<%=actionURL%>">
<select name="city">
<option val="DEL">Delhi</option>
<option val="BOM">Mumbai</option>
</select>
<input type="submit" value="Submit"/>
</form>

Result.jsp-角度页面。在这里，我引导我的角度应用程序并拥有我的主选择器。

<script>
        System.import('app').catch(function(err){ console.error(err); });
</script>

  <my-app>
  </my-app>

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent } from './app';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

app.ts

import { Component,  OnInit} from '@angular/core';
import {Inject} from '@angular/core';

import { SearchService } from './search.service';


@Component({
    selector: 'my-app',
   templateUrl: "app/search.html",
   providers:[ SearchService ]
})
export class AppComponent implements OnInit  { 
    constructor(@Inject(SearchService)  private searchService: SearchService) { }
    searchObj : string;

        getSearchService() {
 //     this.searchService.getSearch().then(heroes => this.heroes = heroes);
          this.searchService.getSearch().then(searchObj => this.searchObj = searchObj);
    }

    ngOnInit() {
        this.getSearchService();
    }
}

search.service.ts - 这将生成一个ajax请求来获取结果json。在请求中，我需要将我的SEARCH_QUERY_ATTRIBUTE作为json字符串传递给webservice。

/// <reference path="../node_modules/typings/index.d.ts" />

import { Injectable }    from '@angular/core';
import {Headers, Http, Response } from '@angular/http';
import {Inject,forwardRef} from '@angular/core';

//import { Observable } from 'rxjs/Observable';
//import {Observer} from 'rxjs/Observer';
//import 'rxjs/add/operator/map'; 
//import 'rxjs/add/operator/catch';

import 'rxjs/add/operator/toPromise';


@Injectable()
export class SearchService {
    private _baseUrl = 'restwebsvc/searchresult';

    http: Http;


    constructor(@Inject(forwardRef(() => Http)) http: Http) { this.http = http;}

    getSearch() {
         let headers = new Headers({'Accept': 'application/json',
    'Content-Type': 'application/json' });
         return this.http.post(this._baseUrl, **SEARCH_QUERY_ATTRIBUTE**, {headers: headers})
               .toPromise()
               .then(response => response.json())
               .catch(this.handleError);


    }

     private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

我正在从结果页面点击ajax以获取搜索结果。那么如何在search.service.ts中访问我的SEARCH_QUERY_ATTRIBUTE以在http请求中作为json传递。

或者有没有办法当我提交我的search.jsp时，我会在表单提交（而不是结果页面上的ajax）上创建结果，然后在变量（request）中设置我的结果json，返回我的结果页面，然后在app.ts上访问我的结果json。

如何在角度2应用程序中将json数据从一个页面传递到另一个页面

0 个答案: