使用angular2文件安装模拟环境
使用angular2文件安装模拟环境
提问于 2017-01-13 11:49:26
我正在尝试建立一个模拟环境，如下所示，它是受这启发的。
environment.mock.ts
export const environment = {
production: false,
PRODUCT_LIST : 'http://localhost:4200/app/mock-json/products.json',
SAVE_CART : 'http://localhost:4200/app/mock-json/cart.json'
};environment.ts
export const environment = {
production: false,
PRODUCT_LIST : 'http://x.x.x.x:9000/service/products',
SAVE_CART : 'http://x.x.x.x:9000/service/cart'
};服务方法
getCartData (request: string):Promise<Cart[]>{
return this.http.post(environment.SAVE_CART, request)
.toPromise()
.then(response => {
.....
})
.catch(this.handleError);
}当我使用ng serve运行时，所有东西在原始服务端点上都运行良好。
但是，当我使用ng serve --environment=mock时，由于POST调用，Save功能无法工作。(所有的GET电话都正常工作)
实际上我需要用这样的方式来设置结构，
- 使用
ng serve。我可以切换到原始实现，它将使用原始的服务终结点。 - 使用
ng serve --environment=mock，我可以切换到模拟实现，它将使用JSON文件。 - 在切换时，我不需要触摸任何代码。对于模拟实现，将始终提供一组预定义的数据，因为我的JSON文件是硬编码的。
备注：，我更新了主要问题，以澄清我想要的内容。我在下面的柱塞中遇到了同样的错误(请检查控制台日志)。但是请注意:这个柱塞没有实现环境，所以解决这个柱塞可能解决不了我的问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-16 08:35:25
我已经用以下的想法找到了答案。
在使用模拟环境时，如果可以继承和重写Angular2 Http post方法，则使用get方法。
下面的代码解决了我的问题。
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { RequestOptionsArgs, RequestOptions } from "@angular/http";
import { ConnectionBackend, Http, Request, Response, Headers } from "@angular/http";
@Injectable()
export class MockHttp extends Http {
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
console.log('Mock Http POST...');
return super.get(url, options).catch(err => {
console.log(err);
if (err.status === 404) {
console.log('404 error');
return Observable.throw(err);
}
});
}
}我在我的AppModule中使用了以下提供程序
{
provide: Http,
useFactory: (
backend: XHRBackend,
defaultOptions: RequestOptions) => {
if(environment.MOCK){
return new MockHttp(backend, defaultOptions)
}
else {
return new Http(backend, defaultOptions);
}
},
deps: [XHRBackend, RequestOptions]
}并在新环境变量模拟上介绍如下。
export const environment = {
production: false,
MOCK : true,
PRODUCT_LIST : .....
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41634007
复制相关文章
相似问题
腾讯云开发者
