Angular和Typescript发送帖子请求

Question

我有一个简单的页面，其中只有1个按钮和1个文本字段，带有角和打字稿。 我想对发布张贴在文本框中的字符串的链接发出发布请求。

我的按钮html：

 <a class="button-size">
      Add Customer
    </a>

和按钮ts文件：

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

@Component({
  selector: 'customer-button123',
  templateUrl: './blabla',
  styleUrls: ['./clacla']
})
export class AddCustomerButtonComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

文本框html：

<mat-form-field>
  <input matInput placeholder="Customer Name">
</mat-form-field>

文本框ts文件：

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

@Component({
  selector: 'customer-text-field',
  templateUrl: './blabla2',
  styleUrls: ['./clacla2']
})
export class CustomerTextFieldComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

简单的包装器页面html是：

<div class="input-label">
    <mg-customer-text-field></mg-customer-text-field>
</div>

<div>
  <mg-customer-button123></mg-customer-button123>
</div>

我如何发送帖子请求链接到localhost8080 / admin / addCustomer？

Answer 1

如果将前端托管在端口：4200（默认的Angular端口服务）上，并且您想将请求发送到http：// localhost8080 / admin / addCustomer ，则需要代理配置。 您可以在此处查看更多信息： https : //itnext.io/angular-cli-proxy-configuration-4311acec9d6f

Answer 2

您使用HttpModule

我使用一项服务来分隔http请求。

例

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'customer-button123',
  templateUrl: './blabla',
  styleUrls: ['./clacla']
})
export class AddCustomerButtonComponent implements OnInit {

data: any;
results: any;

  constructor(private apiService: ApiService) { }
  ngOnInit() {
  }
    getDataFromApi() {
      this.apiService.getData(this.data).subscribe(results => {
        this.results = results;
    });
 }

ApiService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  apiUrl: string = environment.apiUrl;
  constructor(private http: HttpClient) {}

getData(data): any {
  return this.http.get(`http://localhost:8080/api/get-data`);
}

HTML

<div class="input-label">
  <mg-customer-text-field [(ngModel)]="data"></mg-customer-text-field>
</div>

<div>
  <mg-customer-button123 (click)="getDataFromApi()"></mg-customer-button123>
</div>