angular - 将 FirebaseUI 与 AngularFire2 结合使用

Question

我还没有找到任何样本。是否可以使用 FirebaseUI使用 AngularFire2？据我所知，UI 不是 AngularFire2 的一部分。

Answer 1

是的，AngularFire 和 FirebaseUI 可以一起工作。你需要:

1:导入 FirebaseUI 并赋予其访问 firebase 的权限(例如，在 Bootstrap 之前)

import * as firebase from 'firebase/app'

// Attach firebase to window so FirebaseUI can access it
(<any>window).firebase = firebase

// Import FirebaseUI standalone (as its npm.js file causes double firebase code)
import 'firebaseui/dist/firebaseui'  // Imports for side effects only

// Declare `window.firebaseui` that the above import creates
declare global {
    const firebaseui
}

Why you can't just import * as firebaseui like you do with firebase

2:在服务中初始化 FirebaseUI(这样它只发生一次)，并将 AngularFire 创建的 auth 实例传递给它。

constructor(private af_auth: AngularFireAuth){
    this.fui_auth = new firebaseui.auth.AuthUI(this.af_auth.auth)
}

3:在组件中渲染 UI

@Component({
    'selector': 'app-signin',
    'template': '',  // Populated by `fui_auth.start()`
})
export class SigninComp {

    constructor(private user: UserService){}

    ngOnInit(){
        // Show Firebase UI auth widget
        this.user.fui_auth.start('app-signin', {config...}})
    }
}

还有a module available但它目前患有 this issue