Firebase& 'Appcomponent'类型中不存在AngularFire2'afAuth'

时间:2017-05-29 20:06:16

标签: angular firebase angularfire2

我目前正在尝试关注:https://github.com/angular/angularfire2

我遇到的问题是:     属性'afAuth'在'AppComponent'类型上不存在。

我的app.component.ts看起来像这样:

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from "rxjs/Observable";
import * as firebase from 'firebase/app';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user: Observable<firebase.User>;
  items: FirebaseListObservable<any[]>;
  constructor(afAuth: AngularFireAuth, db: AngularFireDatabase) {
    this.user = afAuth.authState;
    this.items = db.list('items');
  }
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
     this.afAuth.auth.signOut();
  }
}

我的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 { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

export const firebaseConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxx',
    databaseURL: 'xxxxxxxxxxxxxxxxxx',
    projectId: 'xxxxxxxxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxxxxxx',
    messagingSenderId: 'xxxxxxxxxx'
};

@NgModule({
  declarations: [
    AppComponent
  ],
  exports: [ AppComponent ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

任何人都知道如何解决此问题? (我对编程非常陌生 - 只是想把数据放到firebase中,但似乎没有教程向我展示如何解决这个问题的最新方法)

1 个答案:

答案 0 :(得分:1)

这是打字稿问题。您没有将afAuth设置为private或public,因此您只能在constuctor中访问它。改变它:

...
export class AppComponent {

  ...

  constructor(private afAuth: AngularFireAuth, db: AngularFireDatabase) {
    this.user = afAuth.authState;
    this.items = db.list('items');
  }

  ...

}