在 Angular 5 (CLI) 中，如何将数据从 index.js 传递到组件？答案

【问题标题】：In Angular 5 (CLI), how do I pass data from index.js to a component?在 Angular 5 (CLI) 中，如何将数据从 index.js 传递到组件？
【发布时间】：2018-05-19 08:08:59
【问题描述】：

我在index.js 中有一些从本教程中获得的代码：https://angularfirebase.com/lessons/angular-stripe-payments-part-2-firebase-cloud-functions-backend/

代码如下：

const functions = require('firebase-functions')
const admin = require('firebase-admin')

admin.initializeApp(functions.config().firebase);

const stripe = require('stripe')(functions.config().stripe.testkey)



exports.stripeCharge = functions.database
                                .ref('/payments/{userId}/{paymentId}')
                                .onWrite(event => {



  const payment = event.data.val();
  const userId = event.params.userId;
  const paymentId = event.params.paymentId;


  // checks if payment exists or if it has already been charged
  if (!payment || payment.charge) return;

  return admin.database()
              .ref(`/users/${userId}`)
              .once('value')
              .then(snapshot => {
                  return snapshot.val();
               })
               .then(customer => {

                 const amount = payment.amount;
                 const idempotency_key = paymentId;  // prevent duplicate charges
                 const source = payment.token.id;
                 const currency = 'usd';
                 const charge = {amount, currency, source};


                 return stripe.charges.create(charge, { idempotency_key });

               })

               .then(charge => {
                   admin.database()
                        .ref(`/payments/${userId}/${paymentId}/charge`)
                        .set(charge)
                  })


});

如何将“SUCCESS”消息传递给我的组件，例如：make-payment.component.ts，在 TypeScript 中。

【问题讨论】：

标签： javascript angular typescript firebase angular-cli

【解决方案1】：

我不知道是否是最好的方法，但您可以使用自定义事件与您的组件进行通信

在您的组件或其他任何东西上：

import { Component } from '@angular/core';
import {fromEvent} from 'rxjs';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      constructor() {
        fromEvent(window,'myEvent').subscribe((e:any) => {
            console.log(e.detail);
        });
      }
    }

在您的 Angular 应用程序之外（例如：index.ts，但可以在任何地方）

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // create and dispatch the event
  var event = new CustomEvent("myEvent", {
    detail: {
      foo: 'bar'
    }
  });
  // be sure to dispatch event after you add listener.
  window.dispatchEvent(event);
}).catch(err => console.error(err));

online code here

【讨论】：