Question

我想从firebase声明一个全局对象：

我的代码如下所示：

app.component.ts

export class AthleticsApp {
af.auth.subscribe(user => {
            // here i want to make the user global somehow
        });

是否可以使用户全球化？什么是最好或最简单的方法呢？

非常感谢！

Answer 1

如果您真正需要做的就是为组件提供全局对象，请考虑opaque token。

然而，由于对象必须得到解决 - 理想情况下只需要解决一次 - 我会考虑将其嵌入到一个小型服务中，作为firebase的外观：

@Injectable()
export class UserService {

  private _user;
  public get user(): Observable<User> {
    if (!this._user) {
      this._user = this.af.auth.cache();  // .cache guarantees at most one request
    }
    return this._user;
  }

  private af;

  constructor() {
  ...establish af reference
  }
}

通过在AppComponent级别将其添加为提供程序，可以将此服务提供给所有组件：

@Component({
  selector: 'my-app',
  template: '<my-comp></my-comp>'
  providers: [
    UserService
  ]
})
export class AppComponent { 
}

需要用户对象的组件可以通过服务访问它。请注意，用户将被解析仅一次，由服务中的.cache运营商提供。

@Component({
  selector: 'my-comp',
  template: '...'
})
export class MyComp { 

  constructor(private userService: UserService) {
    this.userService.user.subscribe(user => {
      ...deal with the user
    });
  }
}

如果你真的想摆脱userService.user.subscribe（虽然它会立即返回所有后续请求），你可以使用route resolver

在第一次使用之前解析对象

编辑：通过在AppComponent级别将其添加为提供程序，可能需要强调您在所有组件中传递UserService的相同实例 - 因此它充当全局可用变量。这是angular 2 dependency injection特有的强大功能。

Answer 2

让我们假设你有两个班级：

var MyVariable = ' ';
export class AthleticsApp1 {
af.auth.subscribe(user => {
            // MyVariable is accessible here
        });

export class AthleticsApp2 {
af.auth.subscribe(user => {
            // MyVariable is accessible here
        });

现在，两个类都可以访问 MyVariable 而没有任何问题，因为它属于范围。

Answer 3

随着时间的推移，随着firebase更新你的用户对象，我建议使用Redux并将该用户对象放在状态树中。

这种闷热只会产生一个对象，每个其他组件将同时使用，每个组件将从firebase获得最新的对象。

Ngrx / Store（Redux for Angular2）：https://github.com/ngrx/store

然后改变：

af.auth.subscribe(user => {
            your_redux_store_object.dispach({action: Actions.USER_UPDATE,payload: user});
        });

每个组件将使用同一商店对象随时间消耗更新。

从firebase声明全局变量的最佳方法？

3 个答案: