使用Angular Fire 2更新Firebase中的计数器

npm install firebase @angular/fire

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  ...
})
export class AppModule { }

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="incrementCounter()">Increment Counter</button>
    <button (click)="decrementCounter()">Decrement Counter</button>
    <p>Counter: {{ counter }}</p>
  `
})
export class CounterComponent {
  counter: number;

  constructor(private db: AngularFireDatabase) {
    this.getCounterValue();
  }

  getCounterValue() {
    this.db.object('counter').valueChanges().subscribe((value: number) => {
      this.counter = value;
    });
  }

  incrementCounter() {
    this.db.object('counter').query.ref.transaction((currentValue: number) => {
      return (currentValue || 0) + 1;
    });
  }

  decrementCounter() {
    this.db.object('counter').query.ref.transaction((currentValue: number) => {
      return (currentValue || 0) - 1;
    });
  }
}