將AngularJS服務轉換爲Angular

如何將此AngularJS轉換爲Angular？我創建了組件ForgotPassword，並不知道如何正確發送http.post到我的c＃控制器。將AngularJS服務轉換爲Angular

function (window, angular) { 
"use strict"; 

angular.module("Mobile") 
.service("accountService", ["$http", function ($http) { 
return { 

forgotPassword: function (email, success, error) { 
$http.post("Account/ForgotPassword", { Email: email}).success(success).error(error); 
    } 
    } 
}]); 
})(window, window.angular);

來源

2017-07-25 V. Aliosha

您將需要創建一個服務類

app.serivce.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AppProvider {  
    constructor(private http: Http) { 
    } 

    public forgotPassword(email: string):Observable<any> { 
    let url:string = 'apiUrl/Account/ForgotPassword'; 
    let body: any = { Email: email } 

    return this.http.post(url, body).map((res:Response) => res.json()); 
    } 
}

這種方法會從你的component.ts內部調用文件

來源

2017-07-25 11:13:33

你的意思是，我不必創建se對照app.service文件？ –

@ V.Aliosha是的，你應該。 – Pac0

accountComponent.ts

constructor(private accountSer: accountService) 

forgotPasswordButton(){ 
this.accountSer.forgotPassword(value) 
}

個accountService.ts

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


import 'rxjs/Rx'; 



@Injectable() 
export class UserDetailService { 
    public headers: Headers; 
    constructor(private http: Http) { 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
    } 
    forgotPassword(value){ 
    this.http.post('Account/ForgotPassword', JSON.stringify(value), { headers: this.headers }).subscribe();}}

來源

2017-07-25 11:21:43 k11k2

我該怎麼在es6中做這個'private http：Http'？ –

你不能。「：Http」是打字稿輸入。靜態類型不是es6中的一個功能 – XGreen

因此，是否有一種方法可以在沒有TS的情況下執行此操作？ –

創建一個服務類

import {Injectable} from '@angular/core'; 
import {Http, Response, Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class accountService { 

    forgotPassword(param): Observable<any> { 
     return this.http.post('Account/ForgotPassword', 
      JSON.stringify(param), 
      {headers: this.headers}) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
}

然後導入到的服務組件

import {accountService} '../../services/accountService '

從組件調用你的服務

export class ForgotPasswordComponent implements OnInit { 
    constructor(private http: HttpClient , public httpService: accountService) { 


    forgotPassword() { 
     this.busy = this.httpService.forgotPassword() 
      .subscribe(
       data => { Email:this.email }, 
       error => console.log('error'), 
       () => this.forgotPasswordComplete(null) 

      ); 
    } 

    forgotPasswordComplete(result: any) { 
     //alert('error loading http service'); 
    } 
    } 
}

來源

2017-07-25 11:51:25

將AngularJS服務轉換爲Angular

回答

相關問題