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 { }

login-page.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();
  }
}

环境

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应用程序的代码。如果仍然无法使用，请告诉我:)