【實作分享】Angular × Firebase Realtime Database

本文目標：透過Angular拉取建立在Firebase Realtime database上的資料。

Firebase

建立Firebase realtime database

取得Firebase Config

參考本文之前置設定部分

權限設定

資料結構

Angular

引入Firebase Config、套件安裝、import套件及初始化、取得資料

引入Firebase Config

套件安裝

npm install firebase@7.24.0 angularfire2@5.4.2 --save

import套件及初始化

app.component.module

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

將套件導入，並於imports:[]中加入，且初始化

declarations: [
AppComponent,
...
],
imports: [
...
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],

取得資料

於需要拿資料的Component中import AngularFireDatabase及AngularFireList

import { AngularFireDatabase,AngularFireList } from 'angularfire2/database'

並於建構子中將AngularFireDatabase實例化

constructor(public DB:AngularFireDatabase) {}

最後加上撈取資料的程式碼，並於ngOninit中觀察是否有拿到資料

ngOnInit(): void {
  const itemsRef:AngularFireList<any> = this.DB.list(‘Angular’);
  itemsRef.valueChanges().subscribe(res=>{
  this.dbList = res ;
    console.log(res)
  })
}

成果/結語

Serve後F12打開Web Console檢查是否有取得值

OK

接著可以將Console的內容雙向綁定到HTML上後變更database上的資料

會發現當database的資料更動的時候，HTML上的值也會跟著變動，而這也是Realtime database的亮點。

補充

目前angularfire2已經被棄用(棄用之意為不再維護，但目前依然可以透過npm安裝並正常使用)，取而代之的是@angular/fire。

https://codedocu.com/Software/Angular/Firebase/Firebase-into-Angular-in-2021?2620