Angular 如何使用登录名和密码验证用户？

查看Angular 2的此解决方案：

state: string = '';
error: any;

constructor(public af: AngularFire,private router: Router) {
this.af.auth.subscribe(auth => { 
  if(auth) {
    this.router.navigateByUrl('/members');
  }
});
}


 onSubmit(formData) {
if(formData.valid) {
  console.log(formData.value);
  this.af.auth.login({
    email: formData.value.email,
    password: formData.value.password
  },
  {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
  }).then(
    (success) => {
    console.log(success);
    this.router.navigate(['/members']);
  }).catch(
    (err) => {
    console.log(err);
    this.error = err;
  })
}
}

我一直在尝试在Angular 4中使用相同的功能，但是

类型“Observable”上不存在属性“login”

以下是一些不起作用的示例代码：

import { routing } from './app.routing';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { FirebaseObjectFactoryOpts } from "angularfire2/interfaces";
import { AngularFireDatabaseModule, AngularFireDatabase, 
FirebaseListObservable, FirebaseObjectObservable } from 
'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 
'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
 selector: 'app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
 export class AppComponent {
  state: string = '';
   error: any;

  constructor(private afAuth: AngularFireAuth, private db: 
   AngularFireDatabase,private router: Router) {
   this.afAuth.authState.subscribe(auth => { 
  if(auth) {
    this.router.navigateByUrl('/members');
    }
   });
 }


onSubmit(formData) {
if(formData.valid) {
  console.log(formData.value);
  this.afAuth.authState.login({
    email: formData.value.email,
    password: formData.value.password
  },
  {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
  }).then(
    (success) => {
    console.log(success);
    this.router.navigate(['/members']);
  }).catch(
    (err) => {
    console.log(err);
    this.error = err;
    })
  }
}
}

---

您的代码似乎有一半是AF2.0，另一半是4.0

也就是说，AngularFire2不再为Firebase Javascript SDK提供包装器：

---

如果您想知道为什么我们决定不包装JSSDK，。

在这两个示例中，您似乎使用了不同的库；你有没有试过阅读你正在使用的文档，看看你应该如何做？我读了，但我不明白我是新的角度：/然后我建议阅读更多的文档和教程-就目前情况而言，你将authState视为一个可观察的地方，订阅它，在另一个地方，把它当作有一个显然没有的.login方法。@jornsharpe是对的。您应该了解服务和可观察对象是如何工作的。尤其是当你要提出网络请求时。看一下本文中使用Angular的http模块和Observable的示例。

import * as firebase from 'firebase/app';
...
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
...
this.afAuth.auth.signOut();