如何使我的前端和后端在角度上相互沟通？

Question

我是网络开发的新手，我想知道如何使前端的角项目与后端角项目进行通信。

• 我想将用户输入发送到我的后端。
• 我也希望我的后端发送信息到我的前端显示。

Answer 1

如果我正确理解你的问题，你想要发送和接收数据从你的后端角度应用程序。

以角度获取数据：

1. 创建一个服务。

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

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

1. 创建函数以获取服务中的数据

getConfig() {
  return this.http.get(this.configUrl);
}

1. 在组件中调用函数

showConfig() {
  this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

向服务器发送数据

1. 添加标头

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

1. 提出职位要求

addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

1. 在表单上调用一个服务post方法，提交或单击inside组件

this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));

有关更多细节，请通过角度HttpClient指南。