AngularFire2 版本 4 错误

Question

我一直在遵循以下教程： https://www.youtube.com/watch?v=O_jxEC0hWcA

现在我尝试的所有教程都使用旧版本的 AngularFire2，但是本教程有一个链接，如果遵循该链接将解决所有问题。该链接是：https://coursetro.com/posts/code/54/Angular-4-Firebase-Tutorial:-Make-a-Simple-Angular-4-App

但问题是这并没有告诉我们如何处理其他东西，它只是谈论app.component.ts和app.module.ts。

那么使用AuthProviders，AuthMethods的其他地方呢？

import { Component, OnInit, HostBinding } from '@angular/core';   //HostBinding is for router animations
import { Router } from '@angular/router';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import {  AuthProviders, AuthMethods } from 'angularfire2';
//import { moveIn } from '../router.animations'; //for animations - this doesn't exist as of yet
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
//animations: [moveIn()],          //for animation
//host: {'[@moveIn]': ''}         //for animation
})
export class LoginComponent implements OnInit {
error: any;
constructor(public af: AngularFireAuth,private router: Router) {
this.af._subscribe(auth => { 
if(auth) {
this.router.navigateByUrl('/members');
}
});
}
loginFb() {
this.af.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/members']);
}).catch(
(err) => {
this.error = err;
})
}
loginGoogle() {
this.af._login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/members']);
}).catch(
(err) => {
this.error = err;
})
}
ngOnInit() {
}
}

这是我的一个组件的代码。我对此进行了哪些更改才能使其正常工作？

任何帮助将不胜感激。谢谢。

Answer 1

在构造函数中，将AngularFire更改为AngularFireAuth，如下所示：

constructor(public af: AngularFireAuth,private router: Router) {...}

此外，您还需要 更新您的loginFb().this.af后您不需要auth

loginFb() {
this.af.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/members']);
}).catch(
(err) => {
this.error = err;
})
}

在你的loginGoogle()中也这样做

确保您从"angularfire2"导入了AuthProviders和AuthMethods。

import {  AuthProviders, AuthMethods } from 'angularfire2';