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()。 auth

之后您不需要this.af

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';

AngularFire2版本4错误

1 个答案: