标签: angular2-http

我想知道使用哪一个来构建模拟Web服务来测试Angular程序？

您是否需要取消订阅Angular 2 http调用以防止内存泄漏？

 fetchFilm(index) {
        var sub = this._http.get(`http://example.com`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilm(json));
            })
            .subscribe(e=>sub.unsubscribe());
            ...

我知道这是一个普遍的问题,但我没有在Angular 2上传文件.我试过了

1)http://valor-software.com/ng2-file-upload/和

2)http://ng2-uploader.com/home

......但失败了.有人在Angular上传过文件吗？你用了什么方法？怎么办？如果提供任何示例代码或演示链接,我们将非常感激.

我试图在组件呈现之前从我的API加载一个事件.目前我正在使用我的API服务,我从组件的ngOnInit函数调用它.

我的EventRegister组件:

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a …

当我发帖请求时,角度2 http不发送此请求

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions())

http帖子没有发送到服务器,但如果我发出这样的请求

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions()).subscribe(r=>{});

这是有意的,如果有人可以解释我为什么？或者这是一个错误？

我有一个实现CanActivate的AuthGuard(用于路由).

canActivate() {
    return this.loginService.isLoggedIn();
}

我的问题是,CanActivate结果依赖于http-get-result - LoginService返回一个Observable.

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}

我如何将它们结合在一起 - 使CanActivate依赖于后端状态？

我正在使用Angular,TypeScript将文件和JSON数据一起发送到服务器.

以下是我的代码:

import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2';
import {Http, Response, Headers} from 'http/http';


@Component({ selector: 'file-upload' })
@View({
directives: [FORM_DIRECTIVES],
template: `
<h3>File Upload</h3>

<div>
     Select file:
    <input type="file" (change)="changeListener($event)">
</div>

`
})
export class FileUploadCmp {

public file: File;
public url: string;
headers: Headers;


constructor(public http: Http) {
    console.log('file upload Initialized');
    //set the header as multipart        
    this.headers = new Headers();
    this.headers.set('Content-Type', 'multipart/form-data');
    this.url = 'http://localhost:8080/test';
}

//onChange file listener
changeListener($event): void …

实际上,我正在使用一个以Angular 2编码的接口的Spring REST API.

我的问题是我无法使用Angular 2上传文件.

我在java中的Webresources是这样的:

@RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam MultipartFile file) {
    //Dosomething 
}

当我通过带有Auth标头等的URL请求调用它时,它完全正常工作...(使用Chrome的Advanced Rest Client扩展)

证明:(在这种情况下一切正常)

我加了

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

Spring配置文件和Pom依赖项

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2</version>
</dependency>

但是,当我尝试使用webform执行相同的操作时:

<input type="file" #files (change)="change(files)"/>
<pre>{{fileContents$|async}}</pre>

使用(更改)方法:

change(file) {
    let formData = new FormData();
    formData.append("file", file);
    console.log(formData);
    let headers = new Headers({
        'Authorization': 'Bearer ' + this.token,
        'Content-Type': 'multipart/form-data'
    });
    this.http.post(this.url, formData, {headers}).map(res => res.json()).subscribe((data) => console.log(data));
    /*
    Observable.fromPromise(fetch(this.url,
        {method: 'post', body: formData},
        {headers: …

我正在尝试为我的所有角度2 http请求设置基本网址.以下是我的申请的基本设置.

class HttpOptions extends BaseRequestOptions {
  url:string = "http://10.7.18.21:8080/api/";
}


bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: HttpOptions})
]);


export class AppComponent {
  users:Array<User>
  constructor(private http: Http) {
    http.get("/users")
      .subscribe(res => this.users = res.json());
  }
}

请求不会发送到http://10.7.18.21:8080/api/users,正如我对我的配置所期望的那样.而是将请求发送到http:// localhost:8000/users.

如何在角度2应用程序中为http请求设置基本URL？

我正在使用Angular 2.0.0-beta.0.

我有一个使用Angular 2的Ionic 2应用程序,它将Http PUT发送到ASP.NET Core API服务器.这是我用来发送请求的方法:

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);

    const url = `${this.studentsUrl}`;

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

我在headers对象上设置了身份验证密钥/值.

但是当我在服务器上收到此请求时,我在标题上找不到身份验证密钥:

正如您在图片中看到的那样,标题上有许多键,但不是我手动添加到客户端应用程序中的标题的内容和身份验证密钥.

我究竟做错了什么？