要在AngularFire中动态切换多个存储桶,可以使用Angular的依赖注入功能来注入FirebaseApp实例,并在需要时动态更改存储桶。
首先,确保已安装AngularFire和Firebase,并在app.module.ts文件中导入必要的模块:
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
然后,在app.module.ts中添加FirebaseApp实例的提供者:
import { AngularFireStorage } from '@angular/fire/storage';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireModule, FirebaseApp } from '@angular/fire';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireStorageModule
],
providers: [
AngularFireStorage,
AngularFireAuth,
{ provide: FirebaseApp, useFactory: firebaseAppFactory }
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function firebaseAppFactory() {
return firebase.initializeApp(environment.firebaseConfig, 'app1');
}
在上面的代码中,我们使用useFactory来创建FirebaseApp实例。我们还通过传递environment.firebaseConfig和' app1 '参数来初始化FirebaseApp实例。在此示例中,我们将' app1 '用作自定义存储桶的标识符。
接下来,在组件中注入AngularFireStorage和FirebaseApp实例:
import { AngularFireStorage } from '@angular/fire/storage';
import { FirebaseApp } from '@angular/fire';
@Component({
selector: 'app-my-component',
template: '...'
})
export class MyComponent {
constructor(private storage: AngularFireStorage, @Inject(FirebaseApp) private firebaseApp: any) { }
switchBucket(bucketName: string) {
const storageRef = this.storage.storage.refFromURL(`gs://${bucketName}`);
storageRef._delegate.app = {
...this.firebaseApp
};
}
}
在上面的代码中,我们注入了AngularFireStorage和FirebaseApp实例,并在switchBucket方法中使用storageRef._delegate.app来动态更改存储桶。我们使用存储桶名称构建新的storageRef,并将其app属性设置为新的FirebaseApp实例。
最后,调用switchBucket方法来切换存储桶:
export class MyComponent {
...
switchBucket(bucketName: string) {
const storageRef = this.storage.storage.refFromURL(`gs://${bucketName}`);
storageRef._delegate.app = {
...this.firebaseApp
};
}
ngOnInit() {
this.switchBucket('my-bucket1'); // 初始存储桶
}
}
在上面的代码中,我们在组件的ngOnInit方法中切换到初始存储桶。您可以根据需要在其他地方调用switchBucket方法来切换到不同的存储桶。
这是一个动态切换多个存储桶的示例解决方案。通过使用Angular的依赖注入和FirebaseApp实例,您可以在AngularFire中实现动态存储桶切换。
上一篇:AngularFire SSR的托管函数默认为uscentral1。您如何更改它?
下一篇:AngularFire v7.6:FirebaseError:预期collection()的第一个参数是CollectionReference。