首先,需要确保已经使用 Firebase CLI 创建了 Firebase 项目并安装了 AngularFire 库。然后,我们需要将 AngularFireModule 导入到模块中:
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig)
],
...
})
export class AppModule { }
接下来,我们可以创建一个 MovieService 类来管理 Firebase 上的电影列表:
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class MovieService {
constructor(private db: AngularFireDatabase) { }
getMovies() {
return this.db.list('/movies').valueChanges();
}
addMovie(movie: any) {
return this.db.list('/movies').push(movie);
}
deleteMovie(movieId: string) {
return this.db.object('/movies/' + movieId).remove();
}
}
在这个示例中,我们使用 AngularFireDatabase 服务来访问 Firebase 数据库。getMovies 方法返回一个值的变化流,该流表示 /movies 路径中的所有电影。addMovie 方法接受一个电影对象并将其添加到 /movies 路径中。deleteMovie 方法接受一个电影 ID 并从 /movies 路径中删除该电影。
最后,我们可以在组件中使用 MovieService:
import { Component, OnInit } from '@angular/core';
import { MovieService } from '../movie.service';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
movies: any[];
constructor(private movieService: MovieService) { }
ngOnInit() {
this.movieService.getMovies().subscribe(movies => {
this.movies = movies;
});
}
addMovie(title: string) {
this.movieService.addMovie({ title: title });
}
deleteMovie(movieId: string) {
this.movieService.deleteMovie(movieId);
}
}
在这个示例中,我们在 ngOnInit 钩子中使用 MovieService 获取电影列表并将其存储在组件属性中。在 addMovie 方法中,我们使用 MovieService 添加新电影。在 deleteMovie 方法中,我们使用 MovieService 删除电影。