如何在 Angular 组件中正确使用 Cloud Functions？

Question

我在 Firebase 上创建了一个云函数，并尝试对其执行 POST 方法。 我应该如何将此功能触发到 Angular 组件中？

这是我所做的：

  const url = 'my-cloud-function-url';
  const params: URLSearchParams = new URLSearchParams();

  params.set('id', this.id);

  this.http.post(url, params)
      .toPromise()
      .then(res => {
          console.log(res);
       })
       .catch(err => {
          console.log(err);
       });

所以这段代码可以工作，但是 POST 方法不接受参数中的参数。我知道我可以更改 url 以在其中添加参数，但我很确定这是肮脏的方法。

感谢您的帮助！

Answer 1

https://angular.io/tutorial/toh-pt6#enable-http-services

简而言之， 创建调用 http post/get 函数的服务。 当一个组件需要数据时，它会使用如下服务：

sms.service.ts

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

const BASE_API_URL = 'http-url';
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class SmsService {

    constructor(public http: HttpClient){}

    sendSms(sms){
        return this.http.post(BASE_API_URL+'/sms/send', JSON.stringify(sms), httpOptions);
    }

}

common.container.ts

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

@Component({
    selector: 'app-common',
    styleUrls: ['common.container.css'],
    templateUrl: 'common.container.html'
})

    export class CommonContainerComponent {

    public number;
    public smsMessage;

    constructor(public smsService: SmsService) {}

    sendSms(number, message) {

        const sms = {
            receiver : number,
            context : message
        };

        this.smsService.sendSms(sms).subscribe(
            results => {
                console.log('sendSms results : ', results);
            },
            error => {
                console.log('sendSms error : ', error);
            },
            () => {
                console.log('sendSms completed');
            }
        );
    }
}