属性“订阅”在类型Auth上不存在 [英] Property 'subscribe' does not exist on type Auth

问题描述

使用下面的代码，我得到错误 Property'subscribe'在类型Auth 中不存在。如果我从app.component.ts中删除整个订阅代码块，那么我没有得到任何错误，但浏览器直接在主页上打开，而不是登录页面。在app.component.html的底部，我包含了< router-outlet>< / router-outlet> ，

app.component.ts

$ b

从{@ angular / core ;
从'@ angular / router'导入{Router};

从'rxjs / Observable'导入{Observable};
从'angularfire2'导入{AngularFireModule};
从'angularfire2 / database'中导入{AngularFireDatabaseModule，AngularFireDatabase，FirebaseListObservable};
从'angularfire2 / auth'中导入{AngularFireAuthModule，AngularFireAuth};
从'../environments/environment'导入{environment};

$ b @Component（{
selector：'app-root'，
templateUrl：'./app.component.html'，
styleUrls： ['./app.component.css']
}）
导出类AppComponent {
private isLoggedIn：Boolean;
private user_displayName：String;
private user_email：String;

构造函数（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

从'@ angular / platform-b​​rowser'导入{BrowserModule};
从'@ angular / core'导入{NgModule};
从'@ angular / forms'导入{FormsModule};
从'@ angular / http'导入{HttpModule};
从'@ angular / router'导入{RouterModule，Routes};

从'./app.component'导入{AppComponent};
从'./login-page/login-page.component'导入{LoginPageComponent};
从'./home-page/home-page.component'导入{HomePageComponent};

从'rxjs / Observable'导入{Observable};
从'angularfire2'导入{AngularFireModule};
从'angularfire2 / database'中导入{AngularFireDatabaseModule，AngularFireDatabase，FirebaseListObservable};
从'angularfire2 / auth'中导入{AngularFireAuthModule，AngularFireAuth};
从'../environments/environment'导入{environment};


const routes：Routes = [
{path：''，component：HomePageComponent}，
{path：'login'，component：LoginPageComponent}
];
$ b @NgModule（{
声明：[
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

 从'@ angular / core'导入{Component，OnInit}; 
从'@ angular / router'导入{Router}; 
 
从'@ angular / core'导入{NgModule}; 
从'rxjs / Observable'导入{Observable}; 
从'angularfire2'导入{AngularFireModule}; 
从'angularfire2 / database'中导入{AngularFireDatabaseModule，AngularFireDatabase，FirebaseListObservable}; 
从'angularfire2 / auth'中导入{AngularFireAuthModule，AngularFireAuth}; 
从'environments / environment'中导入{environment}; 
从'firebase / app'导入*作为firebase; 
 $ b @Component（{
 selector：'app-login-page'，
 templateUrl：'./login-page.component.html'，
 styleUrls： ['./login-page.component.css'] 
}）
导出类LoginPageComponent实现OnInit {
 
构造函数（私有路由器：路由器，公共afAuth：AngularFireAuth）{ } 
 $ b ngOnInit（）{
} 
 
 login（）{
 this.afAuth.auth.signInWithPopup（new firebase.auth.GoogleAuthProvider（） ）; 
 
 
 $ / code $ / pre 
 $ b $ h1 homepage.component.ts $ / $ 
 $ b 
 从'@ angular / core'导入{Component，OnInit}; 
从'@ angular / router'导入{Router}; 
 
从'@ angular / core'导入{NgModule}; 
从'rxjs / Observable'导入{Observable}; 
从'angularfire2'导入{AngularFireModule}; 
从'angularfire2 / database'中导入{AngularFireDatabaseModule，AngularFireDatabase，FirebaseListObservable}; 
从'angularfire2 / auth'中导入{AngularFireAuthModule，AngularFireAuth}; 
从'environments / environment'中导入{environment}; 
 
 @Component（{
选择器：'app-home-page'，
 templateUrl：'./home-page.component.html'，
 styleUrls： ['./home-page.component.css'] 
}）
导出类HomePageComponent实现OnInit {
 
构造函数（私有路由器：路由器，公共afAuth：AngularFireAuth）{ } 
 
 ngOnInit（）{
} 
 
注销（）{
 this.afAuth.auth.signOut（）; 
 
 
 
 
 
 environment.ts 
 
 
生产：false，
 firebase：{
 apiKey：
 
  export const environment = ....，
 authDomain：....，
 databaseURL：.......，
 projectId：，
 storageBucket： .........，
 messagingSenderId：........
} 
}; 
  

我希望应用能够像我可以先登录的地方一样，然后成功到主页。但订阅正在创建一个问题。

我可以用什么来代替？

任何帮助将不胜感激。

解决方案

似乎订阅函数不存在，应该尝试使用它：

  this.afAuth.auth.onAuthStateChanged（（user）=> ; {
 if（user！= null）{
 //用户登录，使用用户信息
 this.loggedIn = true; 
 this.user_displayName = user.displayName; 
 //等
} else {
 //用户没有登录，重定向到你需要的地方
} 
}） ; 
  

这是我用于Angularfire2应用程序的代码。如果还不行，请告诉我：）

With the code below, I am getting the error Property 'subscribe' does not exist on type Auth. If I remove the entire block of subscribe code from app.component.ts then I am getting no error, but the browser is opening directly on the home page and not the login page. At the bottom of app.component.html I have included <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();
  }
}

environment.ts

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

I want the app to function like where I can first login and then on being successful I will be lead to the homepage. But the subscribe is creating a problem.

What can I use instead of that?

Any help would be greatly appreciated.

解决方案

It seems that the subscribe function doesn't exist, you should try using this instead:

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

This is the code I use for my Angularfire2 apps. If it still doesn't work, please tell me :)

这篇关于属性“订阅”在类型Auth上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！