angular - Auth 类型上不存在属性 'subscribe'

Question

使用下面的代码，我收到错误 Property 'subscribe' does not exist on type Auth 。如果我从 app.component.ts 中删除整个订阅代码块，那么我不会收到错误，但浏览器直接在主页上打开，而不是在登录页面上打开。在 app.component.html 的底部，我包含了 <router-outlet></router-outlet> ,

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private isLoggedIn: Boolean;
  private user_displayName: String;
  private user_email: String;

  constructor(private router: Router, public afAuth: AngularFireAuth) { 
    this.afAuth.auth.subscribe(

      (auth) => {
        if (auth == null) {
          console.log("Logged out");
          this.isLoggedIn = false;
          this.user_displayName = '';
          this.user_email = '';
          this.router.navigate(['login']);
        } else {
          this.isLoggedIn = true;
          this.user_displayName = auth.google.displayName;
          this.user_email = auth.google.email;
          console.log("Logged in");
          console.log(auth);
          this.router.navigate(['']);
        }
      }
    );
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { HomePageComponent } from './home-page/home-page.component';

import { Observable } from 'rxjs/Observable';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';


const routes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'login', component: LoginPageComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginPageComponent,
    HomePageComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    AngularFireModule.initializeApp(environment.firebase, 'app-root'),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录页面.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { NgModule } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from 'environments/environment';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.css']
})
export class LoginPageComponent implements OnInit {

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

  ngOnInit() {
  }

  login() {
      this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }
}

homepage.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { NgModule } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from 'environments/environment';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

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

  ngOnInit() {
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

环境.ts

export const environment = {
    production: false,
    firebase: {
    apiKey: "....",
    authDomain: "....",
    databaseURL: ".......",
    projectId: "",
    storageBucket: ".........",
    messagingSenderId: "........"
  }
};

我希望该应用程序的功能就像我可以首先登录一样，然后成功后我将被引导至主页。但订阅造成了一个问题。

我可以用什么来代替它？

任何帮助将不胜感激。

Answer 1

似乎 subscribe 函数不存在，您应该尝试使用它:

this.afAuth.auth.onAuthStateChanged((user) => {
    if (user != null) {
        // User is logged in, use the user object for its info.
        this.loggedIn = true;
        this.user_displayName = user.displayName;
        // etc.
    } else {
        // User is not logged in, redirect to where you need to.
    }
});

这是我用于 Angularfire2 应用程序的代码。如果仍然不起作用，请告诉我:)