已接入Firebase但无法跨文件调用，如何访问并展示其文档内容？

你现在遇到的问题核心是：在app.module.ts里直接用var定义的Firebase实例，没办法在其他文件里被正确访问到。而且这种直接在模块类外写初始化代码的方式也不符合Angular的最佳实践，我给你两种靠谱的解决方案，你可以根据需求选择：

方案一：将Firebase实例封装为可导入的模块 #

这种方式简单直接，适合小型项目快速实现：

1. 创建单独的Firebase配置文件
   在src/app目录下新建firebase.config.ts，把初始化代码移到这里并导出实例：

// src/app/firebase.config.ts
import * as firebase from 'firebase/app';
import 'firebase/database'; // 一定要引入你需要的Firebase服务，比如数据库

// Firebase配置信息
const firebaseConfig = { 
  apiKey: "AIzaSyBvJ0ZWfd2GcIpKgdcIaZKJ6ohLW_E7DOs", 
  authDomain: "fir-storage-login.firebaseapp.com", 
  databaseURL: "https://fir-storage-login.firebaseio.com", 
  projectId: "firebase-storage-login", 
  storageBucket: "firebase-storage-login.appspot.com", 
  messagingSenderId: "803036592201" 
};

// 初始化并导出Firebase应用和数据库实例
export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDatabase = firebase.database(firebaseApp);

2. 在Home页面中导入并使用
   修改home.page.ts，导入我们导出的数据库实例，同时修正数据加载的逻辑：

// src/app/home/home.page.ts
import { Component, OnInit } from '@angular/core';
import { firebaseDatabase } from '../firebase.config'; // 导入数据库实例

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  states: Array<any> = []; // 初始化数组，避免模板报错

  ngOnInit() {
    // 页面初始化时加载数据
    this.initializeStates();
  }

  async initializeStates() {
    try {
      // 从Firebase获取数据
      const snapshot = await firebaseDatabase.ref('States').once('value');
      // Firebase返回的是键值对对象，转成数组适配*ngFor
      this.states = Object.values(snapshot.val() || {});
    } catch (error) {
      console.error('加载States数据失败:', error);
    }
  }

  getStations(event: any) {
    const searchTerm = event.target.value.toLowerCase();
    if (!searchTerm) {
      // 搜索框为空时重新加载全部数据
      this.initializeStates();
      return;
    }
    // 过滤搜索结果
    this.states = this.states.filter(station => 
      station.toLowerCase().includes(searchTerm)
    );
  }
}

方案二：使用Angular服务封装Firebase（推荐） #

这种方式更符合Angular的依赖注入模式，便于后续维护和扩展：

1. 创建Firebase服务
   在src/app/services目录下新建firebase.service.ts（如果没有services目录就先创建）：

// src/app/services/firebase.service.ts
import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/database';

@Injectable({
  providedIn: 'root' // 全局提供服务
})
export class FirebaseService {
  private database: firebase.database.Database;

  constructor() {
    const firebaseConfig = { 
      apiKey: "AIzaSyBvJ0ZWfd2GcIpKgdcIaZKJ6ohLW_E7DOs", 
      authDomain: "fir-storage-login.firebaseapp.com", 
      databaseURL: "https://fir-storage-login.firebaseio.com", 
      projectId: "firebase-storage-login", 
      storageBucket: "firebase-storage-login.appspot.com", 
      messagingSenderId: "803036592201" 
    };
    const app = firebase.initializeApp(firebaseConfig);
    this.database = firebase.database(app);
  }

  // 封装获取States数据的方法
  async getStates() {
    const snapshot = await this.database.ref('States').once('value');
    return snapshot.val();
  }
}

2. 在Home页面中注入服务并使用
   修改home.page.ts，通过依赖注入使用Firebase服务：

// src/app/home/home.page.ts
import { Component, OnInit } from '@angular/core';
import { FirebaseService } from '../services/firebase.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  states: Array<any> = [];

  // 构造函数中注入Firebase服务
  constructor(private firebaseService: FirebaseService) {}

  ngOnInit() {
    this.initializeStates();
  }

  async initializeStates() {
    try {
      const statesData = await this.firebaseService.getStates();
      this.states = Object.values(statesData || {});
    } catch (error) {
      console.error('加载States数据失败:', error);
    }
  }

  // 搜索方法和方案一一致
  getStations(event: any) {
    const searchTerm = event.target.value.toLowerCase();
    if (!searchTerm) {
      this.initializeStates();
      return;
    }
    this.states = this.states.filter(station => 
      station.toLowerCase().includes(searchTerm)
    );
  }
}

关键注意事项 #

• 一定要引入对应的Firebase服务模块，比如import 'firebase/database'，否则调用firebase.database()会报错；
• Firebase数据库返回的是键值对对象，需要用Object.values()转为数组才能在*ngFor中遍历；
• 原来的代码没有在页面初始化时调用initializeStates()，也没有初始化states数组，这些都会导致数据不显示或者模板报错，已经在上面的代码中修正了。

内容的提问来源于stack exchange，提问作者David Gebauer