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

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');
            }
        );
    }
}