标签: angularfire2

我有一条路线,我想等到从firebase获取auth对象.这是我的代码:

路线

{
  path: 'random',
  component: RandomComponent,
  resolve: { auth: AuthService }
}

AuthService

@Injectable()
export class AuthService implements Resolve<any> {

  constructor(private af: AngularFire) { }

  resolve(): Observable<any> {
    return this.af.auth.take(1);
  }

}

RandomComponent

export class RandomComponent {

  constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.data);
  }

}

很奇怪它记录Object { },所以一个空对象.如果我将AuthService.resolve更改为return Observable.of('whatever'),那么它会记录Object { auth: "whatever" },所以我很确定这部分代码是有效的,只是因为某种原因,angularfire2 auth observable在这种情况下不起作用.(我真的不是一个可观察的专家,所以可能是我做错了什么).

如果我这样做,this.af.auth.take(1).subscribe(auth => console.log(auth));则记录auth对象,以便该部分也正常工作.

那是什么导致了这个问题呢？我究竟做错了什么？

(使用最新的路由器,angular2和angularfire2.)

我正在制作一个angular2-meteor基于Meteor v1.4和的应用程序Angular2 rc-5.到目前为止还不错,但我需要将它与我的Firebase数据库集成,但我在下面得到了例外(我正在Chrome上运行该应用程序).似乎所有我的打字稿都没问题,我没有得到任何错误,我的Meteor应用程序正常加载,我按照安装和设置教程直到第4步结束.(但是因为我使用Meteor,我没有使用角度-cli创建项目),任何想法如何解决这个问题？谢谢

EXCEPTION: Error: This operation is not supported in the environment this application is running on. 

"location.protocol" must be http or https and web storage must be enabled.

BrowserDomAdapter.logError @ browser_adapter.js:84
BrowserDomAdapter.logGroup @ browser_adapter.js:94
ExceptionHandler.call @ exception_handler.js:65
next @ application_ref.js:348
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:225
SafeSubscriber.next @ Subscriber.js:174
Subscriber._next @ Subscriber.js:124
Subscriber.next @ Subscriber.js:88
Subject._finalNext @ Subject.js:128
Subject._next @ Subject.js:120
Subject.next @ Subject.js:77
EventEmitter.emit @ async.js:77
onError @ ng_zone.js:124
onHandleError @ …

我在使用angularfire2时遇到打字稿编译错误:

'FirebaseObjectObservable'类型中不存在属性'take'

我正在从rxjs导入take操作符,所以这个问题没有帮助:AngularFire2类型:"属性'获取'在类型'FirebaseObjectObservable <any>'上不存在"

进口:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Subscription } from 'rxjs';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/operator/take';

导致错误的代码:

this.af.database.object(`/xyz`).take(1);

编译,如果我转换为'任何':

var test: any = this.af.database.object(`/xyz`);
test.take(1);

版本:

"typescript": "^2.1.4"  
"rxjs": "^5.0.3"
"angularfire2": "^2.0.0-beta.6-preview"

我也测试并使用'take'对rxjs Observable工作正常.由于FirebaseObjectObservable扩展了Observable,它也应该可以正常工作.有什么想法为什么打字稿在这里给我一个错误？

使用angulafire它可以在将记录pushid保存到数据库之前检索它:

myModelDto.key = dbRef.push().key;  
// Add the myModelDto to the relative colletion

这很方便,因为我可以将firebase密钥存储为我的模型的属性.
现在,angularfire2这似乎不可能以干净/简单的方式:

constructor(private angFire: AngularFire) {
    this.placeRef$ = angFire.database.list('/places');
}

insertPlace = (place: IPlace): firebase.Thenable<IPlace> => {
    return this.placeRef$.push(place)
               .then(item => {
                          place.id = item.key;
                          this.placeRef$.update(item.key, place)
                });

因此,我想知道我是否以错误的方式接近firebase(为了方便起见,希望将一个关键属性绑定到我的模型上),或者是否有更好的方法将pushid添加到新添加的记录中.

我有一个带有离子离子列表的配置屏幕,用户可以在列表中添加项目,同时显示列表的当前条目.我希望用户能够通过按钮添加新项目.新项目不应立即保存到firebase - 用户必须按下保存按钮才能执行此操作.目前我的代码看起来像这样

  <ion-list *ngIf="regimeList">
    <ion-list-header color="secondary">Items
      <button class="my-select" ion-button outline item-end (click)="addItem()">+</button>
    </ion-list-header>
      <ion-item *ngFor="let item of itemList">
        {{item.name}}
      </ion-item>
  </ion-list>

itemList的数据来自一个带有一点映射/格式化的observable:

this.$ref = this.database.list('/items/' + uid);
this.$ref.subscribe(snapshot => { this.map2itemList(snapshot) });

当用户点击离子按钮时,他会弹出一个可以输入新项目的弹出窗口.按"确定",新条目应显示在列表中,但不保存到firebase.所以我不能使用

this.$ref.push(myNewItem);

由于可观察,数据将直接提交并更新我的视图.分离这两个行动的好策略是什么？先感谢您.

我正在尝试使用 angularFire 2 在 firebase 中登录并创建帐户。电话登录有一个运行良好的 reCaptcha 字段。使用电子邮件和密码创建帐户也工作正常，但我想在创建表单（如电话登录功能）中使用 reCaptcha，但我没有找到方法，可以在 angularFire 中使用电子邮件和密码创建帐户并使用 reCaptcha 验证。我也尝试过文档，但没有这样的。如果 Angular Fire 2 中有类似的选项，请帮助我。我正在使用"angularfire2": "^4.0.0-rc.1",

如何在我的app.component中提供AngularFirestore模块，以便我的默认toBeTruthy()测试通过？

Error: StaticInjectorError(DynamicTestModule)[AppComponent -> AngularFirestore]: 
      StaticInjectorError(Platform: core)[AppComponent -> AngularFirestore]: 
        NullInjectorError: No provider for AngularFirestore!

应用组件

export class AppComponent implements OnInit {
  private notesCollection: AngularFirestoreCollection<any>;
  public notes: Observable<any[]>;

  constructor(private afs: AngularFirestore) {}

  ngOnInit() {
    this.notesCollection = this.afs.collection('notes');
    this.notes = this.notesCollection.valueChanges();
  }
}

这只是默认测试：

class FirebaseMock implements AngularFirestore {
  app: FirebaseApp;
  firestore: FirebaseFirestore;
  persistenceEnabled$: Observable<boolean>;

  collection<T>(path: string, queryFn?: QueryFn): AngularFirestoreCollection<T> {
    return undefined;
  }

  doc<T>(path: string): AngularFirestoreDocument<T> {
    return undefined;
  }

  createId(): string {
    return undefined;
  }
}

describe('AppComponent', () …

我目前在 youtube 上关注了有关具有 firebase 功能的 SSR 的视频。这似乎很完美。现在我正在尝试向我的 ssr 样板应用程序添加一些附加功能。我想添加 Firebase firestore 支持，以便我可以从 firebase firestore 获取数据。我收到此错误ERROR { Error: Uncaught (in promise): TypeError: app.firestore is not a function，并且这只发生在函数（服务器）中。在前端检索数据，但由于功能（服务器）错误，SSR 部分无法工作。我似乎找不到任何解决方案。我的代码可以在这里查看：Github_Repository

我看不出我在这里缺少什么，希望发布这个问题会有所帮助。

谢谢。

第一次尝试

import { Timestamp } from '@firebase/firestore-types';

那么如何创建一个 Timestamp 对象呢？

var now: Timestamp = ???

var now: Timestamp = Timestamp.now() //Module not found: Error: Can't resolve '@firebase/firestore-types'

我想将@angular/fire添加到我的 Nx 工作区（Angular 应用程序）中。

我试图与最佳实践保持一致，但是，官方文档中没有任何关于将此库添加到工作区中的内容。

或者我错过了什么？

1. 安装
   
   • 通过标准命令安装lib可以吗？
     
   • npm i @angular/fire ... 或 ... ng add @angular/fire
     
   • 是否有特定的“Nx 方式”安装它？

2. 放置和命名
   我应该在哪个模块中调用initializeApp()方法？

   • 在应用程序模块中？（在采用 Nx 之前我就是这样做的）

   • 或者一个lib模块？（在我看来这更接近 Nx 哲学）

   • 如果答案是“一个 lib 模块”

     • 应该是哪个模块？
     • 我应该把 lib/module 放在哪里以及我应该给它命名什么？
     • “libs/data-access/api”是个好主意吗？

3. 使用API
   
   • 如何使用已安装的包和初始化的模块（lib）？
   • 我是否应该将 api 库多次导入到需要该功能的每个库中？
   • 或者我只将 api lib 导入到应用程序中一次吗？

如此严格地遵循最佳实践（命名约定等）可能看起来很愚蠢，但我真的想以正确的方式做事。