类型 Auth 上不存在属性“订阅" [英] Property 'subscribe' does not exist on type Auth
问题描述
使用下面的代码,我收到错误 Property 'subscribe' does not exist on type Auth
.如果我从 app.component.ts 中删除整个订阅代码块,那么我不会收到任何错误,但是浏览器是直接在主页而不是登录页面上打开的.在 app.component.html 的底部,我包含了 <router-outlet></router-outlet>
,
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>
,
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();
}
}
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?
任何帮助将不胜感激.
推荐答案
subscribe
功能似乎不存在,你应该试试用这个:
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.
}
});
这是我用于 Angularfire2 应用程序的代码.如果还是不行,请告诉我:)
This is the code I use for my Angularfire2 apps. If it still doesn't work, please tell me :)
这篇关于类型 Auth 上不存在属性“订阅"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!