如何正确使用Angular 4/5中的http.post（）？

Question

我有一个用VB.NET开发的REST Web服务以及一个MS Access数据库。 我试图从Angular应用程序中获取一个字符串值，然后将其插入仅包含一个表的数据库中，如下所示。

现在，我试图使用Web服务方法将Angular应用中的值SriLanka插入数据库中。 尽管我能够插入值，但是我认为我没有正确实现http.post（）方法。

这是我的Angular代码：

app.component.ts

import { Component, Inject } from '@angular/core';
import { AppStore } from './app.store';
import { AppState } from './app.state';
import { Store } from 'redux';
import * as DummyService from './Dummy.service';
import * as DummyActions from './Dummy.actions';
import { HttpClient } from '@angular/common/http';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  counter: number;
  country: string;
  http$: HttpClient;


  constructor( @Inject(AppStore) private store: Store<AppState>, http$: HttpClient) {
    this.http$ = http$;


  }
  ngOnInit() {
    this.Load(this.store, this.http$, this.country);
  }

  Load(store: Store<AppState>, http$: HttpClient, country: string) {
    store.subscribe(() => this.readState());
    this.readState();
    DummyService.Load(this.store, this.http$, 'SriLanka');
  }
}

虚拟服务

import * as Redux from 'redux';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import * as Model from './app.state';
import * as Actions from './Dummy.actions';
export const PASS = "PASS";
export const FAIL = "FAIL";
export const OMIT = "OMIT";

export function Load(store: Redux.Store<Model.AppState>, http$: HttpClient, country: string) {
    try {
        http$.get('assets/AppOptions.json',{responseType: "text"}).subscribe(data => {
            try {
                    var oAppOptions:Model.ApplicationOptions = JSON.parse(data);
                    store.getState().oApplicationOptions = oAppOptions;
                    InsertCountryDetails(store, http$, country);
            }catch(e) {
                alert("Unable to parse the AppOptions.json file.");
            }
        }, function (error:HttpErrorResponse) {
            alert("An error occured while reading the AppOption file.");
        });
    } catch (e) {
        throw new Error("DummyService::Load() Exception : " + e);
    }
}
function InsertCountryDetails(store: Redux.Store<Model.AppState>, http$: HttpClient, country: string){ 
    var WebServiceDataJson: string = JSON.stringify(store.getState().WebServiceData);
    var Servicelink: string = store.getState().oApplicationOptions.WebServiceLink;
    let url = Servicelink + "InsertCountryDetails/" + encodeURI(WebServiceDataJson);
    http$.post(url, country).subscribe((res: Response) => {
        console.log(res);
    });
}

这是我的DummyWebService.vb代码：

Imports System.ServiceModel
Imports System.ServiceModel.Web

<ServiceContract()>
Public Interface IDummyWebService

    <OperationContract>
    <WebInvoke(Method:="POST", ResponseFormat:=WebMessageFormat.Json, BodyStyle:=WebMessageBodyStyle.Wrapped, UriTemplate:="InsertCountryDetails/{WebServiceDataJson}/{Country}")>
    Sub InsertCountryDetails(ByVal WebServiceDataJson As String, ByVal Country As String)

End Interface

这是DummyWebService.svc.vb代码：

Imports System.Web.Script.Serialization
Imports DynamicJsonParser
Imports DummyWebService.ServerCallBackResult

' NOTE: You can use the "Rename" command on the context menu to change the class name "Service1" in code, svc and config file together.
' NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.vb at the Solution Explorer and start debugging.
Public Class Service1
    Implements IDummyWebService

    Public Sub New()
    End Sub
Public Sub InsertCountryDetails(ByVal WebServiceDataJson As String, ByVal Country As String) Implements IDummyWebService.InsertCountryDetails
        RequestLog("InsertCountryDetails WebServiceDataJson : " & WebServiceDataJson & ", Country : " & Country)
        Dim callBack As ServerCallBackResult = New ServerCallBackResult
        Try
            Dim oWebServiceData As WebServiceData = WebServiceData.GetWebServiceData(WebServiceDataJson)
            Dim Dummy As New Dummy(oWebServiceData)
            Try
                Dummy.InsertCountryDetails(Country)
            Catch ex As Exception
                Throw ex
            Finally
                Dummy.Dispose()
            End Try
        Catch ex As Exception
            callBack.Status = EnumStatus.FAIL.ToString
            callBack.ErrorMsg = "DummyWebService::InsertCountryDetails(WebServiceDataJson, Country)    Exception : " + CheckAndGetOleDbExceptionMessage(ex.Message)
            ExceptionLog(callBack.ErrorMsg)
        End Try
    End Sub

End Class

这是Dummy.vb代码：

Imports System.Data
Imports System.Data.OleDb
Imports System.Configuration
Imports System.Web

Public Class Dummy
    Implements IDisposable
    Private oDataInterface As DataInterface
    Private oWebServiceData As WebServiceData

    Protected Overridable Sub Dispose(ByVal disposing As Boolean)
        oDataInterface.Dispose()
    End Sub

    Protected Overrides Sub Finalize()
        MyBase.Finalize()
    End Sub

#Region " IDisposable Support "
    ' This code added by Visual Basic to correctly implement the disposable pattern.
    Public Sub Dispose() Implements IDisposable.Dispose
        ' Do not change this code.  Put cleanup code in Dispose(ByVal disposing As Boolean) above.
        Dispose(True)
        GC.SuppressFinalize(Me)
    End Sub
#End Region

    Public Sub New(ByRef oWebServiceData_in As WebServiceData)
        Try
            Me.oDataInterface = New DataInterface()
            Me.oWebServiceData = oWebServiceData_in
        Catch ex As Exception
            Throw New Exception("Dummy::New() Exception : " + ex.Message)
        End Try
    End Sub

 Public Sub InsertCountryDetails(ByVal Country As String)
        Try
            oDataInterface.InsertCountryDetails(Country)
        Catch ex As Exception
            Throw New Exception("Dummy::GetColorFromCountryName(Country) Exception : " + ex.Message)
        End Try
    End Sub

End Class

这是DataInterface.vb代码：

Imports System.Data.OleDb
Imports System.Data

Public Class DataInterface
    Implements IDisposable
    Private oConn As OleDbConnection
    Private disposedValue As Boolean = False
    Private DataFilter As String = String.Empty

    Protected Overridable Sub Dispose(ByVal disposing As Boolean)
        If Not Me.disposedValue Then
            If disposing Then
                CloseConnection()
            End If

        End If
        Me.disposedValue = True
    End Sub

    Private Sub CloseConnection()
        Try
            oConn.Close()
            oConn = Nothing
        Catch ex As Exception
            Throw New Exception("DataInterface::CloseConnection() Exception : " + ex.Message)
        End Try
    End Sub

    Protected Overrides Sub Finalize()
        MyBase.Finalize()
    End Sub
Public Sub InsertCountryDetails(ByVal Country As String)
        Try
            Dim countryName As String
            countryName = Country
            Dim constring As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=E:\Angular Projects\Dummy\DummyDatabase.accdb"
            Using myconnection As New OleDbConnection(constring)
                myconnection.Open()
                Dim sqlQry As String = "INSERT INTO Countries (Country) VALUES (countryName)"
                Using cmd As New OleDbCommand(sqlQry, myconnection)
                    cmd.Parameters.AddWithValue("@countryName", countryName)
                    cmd.ExecuteNonQuery()
                End Using
            End Using
        Catch ex As Exception
            Throw New Exception("DataInterface::GetColor(Country) Exception : " + ex.Message)
        End Try
    End Sub

实际上，我是.NET和Angular的初学者，我对所做的工作是否正确没有100％的保证。 因此，有人可以告诉我在我的情况下使用http.post（）的方式吗？

Answer 1

我没有做太多的VB.Net，但以下是有关Angular代码的一些建议

您不想从这里获取导入，但来自@ angular / core的文档在这里https://angular.io/api/core/OnInit

如果您在构造函数中添加参数的私有infront，则无需分配它们，这是一个有角的快捷方式。 文档在这里

app.component.ts

import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { AppStore } from './app.store';
import { AppState } from './app.state';
import { Store } from 'redux';
import * as DummyService from './Dummy.service';
import * as DummyActions from './Dummy.actions';
import { HttpClient } from '@angular/common/http';

// import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  counter: number;
  country: string;   
  subscription: Subscription;

  constructor( @Inject(AppStore) private store: Store<AppState>, private http$: HttpClient) {


  }
  ngOnInit() {
    this.Load(this.store, this.http$, this.country);
  }

  Load(store: Store<AppState>, http$: HttpClient, country: string) {
    **// you want to unsubscribe to this in the lifecycle hook ngOnDestroy**
    this.subscription = store.subscribe(() => this.readState());
    this.readState();
    DummyService.Load(this.store, this.http$, 'SriLanka');
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

我希望我的服务是可注入的，我也不喜欢在服务中订阅我的http请求，因为这意味着我必须退订以避免内存泄漏，所以我希望它们返回结果或承诺。 无论我在哪里使用该服务，我都将在那儿订阅诺言，因此可以确保退订。 同样，如果您的服务是可注射的，则需要在打算使用的模块中提供它。 如果它在多个模块中使用，则可以将其包含在app模块中。

import { Injectable } from '@angular/core';
import * as Redux from 'redux';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import * as Model from './app.state';
import * as Actions from './Dummy.actions';
export const PASS = "PASS";
export const FAIL = "FAIL";
export const OMIT = "OMIT";

@Injectable()
export class DummyService {

  constructor(private store: ReducStore<Model.AppState>, private http$: HttpClient) {}

  Load(country: string) {
    try {
        this.http$.get('assets/AppOptions.json',{responseType: "text"}).subscribe(data => {
            try {
                    var oAppOptions:Model.ApplicationOptions = JSON.parse(data);
                    this.store.getState().oApplicationOptions = oAppOptions;
                    InsertCountryDetails(store, http$, country);
            }catch(e) {
                alert("Unable to parse the AppOptions.json file.");
            }
        }, function (error:HttpErrorResponse) {
            alert("An error occured while reading the AppOption file.");
        });
    } catch (e) {
        throw new Error("DummyService::Load() Exception : " + e);
    }
}
InsertCountryDetails(country: string){ 
    var WebServiceDataJson: string = JSON.stringify(this.store.getState().WebServiceData);
    var Servicelink: string = store.getState().oApplicationOptions.WebServiceLink;
    let url = Servicelink + "InsertCountryDetails/" + encodeURI(WebServiceDataJson);
    return this.http$.post(url, country);
}

我希望这可以帮到你。