标签: angularfire2

我正在使用 Firebase 构建一个 Ionic 应用程序，因此使用 AngularFire2。在 Angularfire2 中，您可以进行身份​​验证，但它是一个 observable，必须订阅才能获取用户对象。问题是我似乎无法设置，this.user = user因为它似乎不在.subscribe同一范围内。

这是一个例子，我有一个auth.ts和一个app.component.ts。在我的服务中，我进行身份验证，

auth.ts

export class AuthService {

// user: Observable<firebase.User>;
user: object = {
    displayName: null,
    email: null,
    emailVerified: null,
    photoUrl: null,
    uid: null
};

constructor(private facebook: Facebook,
            private googlePlus: GooglePlus,
            private platform: Platform,
            private afAuth: AngularFireAuth) {

    // this.user = afAuth.authState;
    afAuth.authState.subscribe((user: firebase.User) => {

        if (!user) {
            this.user = null;
            return;
        }
        this.user =  {
            displayName: user.displayName,
            email: user.email,
            emailVerified: …

我打算使用@angular/fire包装器在我的 Angular 应用程序中使用 Firebase 消息传递。

在最初的 Firebase 参考中，他们描述了一个firebase.messaging.isSupported() 方法，在计划让我的应用程序可用于各种浏览器时，这似乎是一个明智的调用。

现在@angular/fire 包装器没有公开该方法，并且在查看它的源代码时，它似乎也没有在内部使用它。

所以我的问题是：只注册requestToken@angular/fire 包装器的可观察对象是否安全，或者我是否需要首先确保当前浏览器支持 Firebase 消息传递？

我目前有一个 Firestore 文档查询，如下所示：

  getDocument(){
    this.albumDoc = this.afs.doc<Album>(`albums/abc`);
    this.album = this.albumDoc.valueChanges(); 
  }

AngularFire 文档指出，您可以使用“快照”更改获取更多数据。但是，没有一个示例说明您将如何执行此操作。对于集合查询，快照更改使用管道/映射，然后返回“数据”，然后您可以根据需要将其分配给变量。

是否可以对文档查询执行相同的操作？我的文档中有一个 firestore 值，我想抓住它并加以利用。

在我的 Angular-Firebase 在线购物项目中，我曾经AuthGuard检查用户是否登录以访问./check-out其他链接，如下面的代码所示。得到一个错误，map因为Observable.User在下面的代码中没有被导入。使用最新版本的所有内容。 auth.service.ts

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { 
    this.user$=afAuth.authState;
  }

  login(){
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
  }
  logout(){
    this.afAuth.auth.signOut()
  }
}

登录.component.ts

import { AuthService } from './../auth.service'
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: …

我的 angular 应用程序有一个奇怪的问题，我刚刚将 AngularFire 添加到我的项目中，但是当我尝试将其安装时，它显示以下错误：

ERROR in nodae_modules/@angular/fire/angularfire2.d.ts(37,49): error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any[]) => any'.
node_modules/@angular/fire/angularfire2.d.ts(40,49): error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any[]) => any'.
node_modules/@angular/fire/angularfire2.d.ts(48,78): error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any[]) => any'.
node_modules/@angular/fire/angularfire2.d.ts(48,107): error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any[]) => any'.
node_modules/@angular/fire/angularfire2.d.ts(50,75): error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any[]) => any'.
node_modules/@angular/fire/angularfire2.d.ts(50,96): error TS2344: …

我对 Angular 和 Firebase\FireStore 很陌生，我发现在尝试将 Firestore 连接添加到我的项目时遇到了以下困难。

我正在按照官方文档将其添加到我的特定项目中：https : //github.com/angular/angularfire/blob/master/docs/install-and-setup.md

所以，首先，我通过 NPM 在我的项目中安装了 AngularFire：

npm install --save firebase @angular/fire

然后我做了：

ng add @angular/fire

然后我以这种方式配置了我的/src/environments/environment.ts文件：

export const environment = {
  production: false,
  firebase: {
    apiKey: "MY-API-KEY",
    authDomain: "soc-dashboard.firebaseapp.com",
    databaseURL: "https://soc-dashboard.firebaseio.com",
    projectId: "soc-dashboard",
    storageBucket: "soc-dashboard.appspot.com",
    messagingSenderId: "801320773797"
    //appId: "1:801320773797:web:14e69306da7b0838d4c54c",
    //measurementId: "G-BHVTXG6CY4"
  }
};

然后我以这种方式配置了我的/src/app/app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import …

导入角度/文件模块后app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

如何在惰性特色模块上管理身份验证服务？