firebase 云功能执行后如何更改 UI？ [关闭]

Question

我按照这篇文章从 Angular 网站发送电子邮件。 https://medium.com/@markgoho/create-a-contact-form-in-angular-using-cloud-functions-for-firebase-5e390bdf5600 电子邮件发送得很好。但是，当云功能成功完成以及出现错误时，我遇到了如何更新 UI 的问题，例如“电子邮件已发送”的消息。或者将发送按钮的颜色更改为绿色。 firebase 函数是否有任何 UI 功能因为我找不到它？

Answer 1

您可以做的是将云函数的结果（例如成功或错误）写入实时数据库中的消息文档（即messages/{pushKey}下），并在您的应用程序中监听此数据库节点的更改，与听众。

在 Cloud Function 中，您可以按照以下方式进行操作：

exports.sendContactMessage = functions.database.ref('/messages/{pushKey}').onWrite((data, context) => {
  const snapshot = change.after;
  const pushKey = context.params.pushKey;

  .....

  return mailTransport.sendMail(mailOptions)
  .then(() => {
     const update = {};
     updates['/messages/' + pushKey + '/status'] = 'success';
     return admin
       .database()
       .ref()
       .update(update);
  })
  .catch((error) => {
     const update = {};
     updates['/messages/' + pushKey + '/status'] = 'failure';
     return admin
       .database()
       .ref()
       .update(update);
  })

请注意，我已将 Cloud Function 语法应用于新版本，请参阅https://firebase.google.com/docs/functions/beta-v1-diff

请注意，对于 >= 1.0 版本，您必须将函数初始化为：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();