Javascript 使用Firebase的angular 2应用程序的性能

我一直在使用angular2和firebase（angularfire2）创建一个web应用程序， 我想知道我的开发方法是否优化了

当用户选择一个组时，我检查他是否已经是该组的成员

ngOnInit() {
    this.af.auth.subscribe(auth => {
      if(auth) {
        this.userConnected = auth;
      }
    });

    this.router.params.subscribe(params=>{
      this.idgroup=params['idgroup'];
    });
    this._groupService.getGroupById(this.idgroup).subscribe(
      (group)=>{
        this.group=group;
          this.AlreadyPaticipe(this.group.id,this.userConnected.uid),
      }
    );
}

这个方法是可行的，但是当我将函数

AlreadyPaticipe（this.group.id，this.userConnected.uid）

放在

getGroupById（this.idgroup.subscribe（）

）之外时，我得到一个错误组是未定义的，因为angular是异步的。我不知道我该怎么做？。如何优化代码？如何将函数

AlreadyPaticipe（this.group.id，this.userConnected.uid）

放置在

getGroupById（this.idgroup）.subscribe（）之外

提前感谢。
一切如流：
首先，您不应该订阅那么多，最好的做法是将您的可观察对象合并为一个，并只订阅一次，因为每次订阅时，您都需要在组件被销毁时进行清理（不适用于http，也不适用于ActivateRoute），最后您必须管理您的订阅（这不是RXjs的目标）。您可以找到

你必须把一切都看作一条流，你的所有属性都是可观察的：

this.user$ = this.af.auth.share(); //not sure of the share, I don't know firebase, don't know what it implies...
this.group$ = this.router.params.map(params => params["idgroup"])
    .switchMap(groupID => this.groupService.getGroupById(groupID)).share();
// I imagine that AlreadyPaticipe return true or false, but maybe i'm wrong
this.isMemberOfGroup$ = Observable.combineLatest(
    this.group$,
    this.user$.filter(user => user !== null)
).flatMap(([group, user]) => this.AlreadyPaticipe(groupID, user.uid));

您甚至不必订阅！在模板中，您只需使用
async
管道即可。例如：

<span>user: {{user$|async}}</span>
<span>group : {{group$|async}}</span>
<span>member of group : {{isMemberOfGroup$|async}}</span>

在这种情况下，不要忘记在
ngondestory（）中
this.subscription.unsubscripte（）

在页面底部有一个非常方便的工具，可以帮助您为正确的行为选择正确的操作符

我不关心流，我希望它能工作，快而不脏：
如果您不想对代码进行太多更改，可以使用Resolve guard，它将在加载组件之前获取数据：

总之，您希望延迟渲染路由组件，直到获取所有必要的数据。
你需要一个解析器

一切都是流：
首先，您不应该订阅那么多，最好的做法是将您的可观察对象合并为一个，并只订阅一次，因为每次订阅时，您都需要在组件被销毁时进行清理（不适用于http，也不适用于ActivateRoute），最后您必须管理您的订阅（这不是RXjs的目标）。您可以找到

你必须把一切都看作一条流，你的所有属性都是可观察的：

this.user$ = this.af.auth.share(); //not sure of the share, I don't know firebase, don't know what it implies...
this.group$ = this.router.params.map(params => params["idgroup"])
    .switchMap(groupID => this.groupService.getGroupById(groupID)).share();
// I imagine that AlreadyPaticipe return true or false, but maybe i'm wrong
this.isMemberOfGroup$ = Observable.combineLatest(
    this.group$,
    this.user$.filter(user => user !== null)
).flatMap(([group, user]) => this.AlreadyPaticipe(groupID, user.uid));

您甚至不必订阅！在模板中，您只需使用
async
管道即可。例如：

<span>user: {{user$|async}}</span>
<span>group : {{group$|async}}</span>
<span>member of group : {{isMemberOfGroup$|async}}</span>

在这种情况下，不要忘记在
ngondestory（）中
this.subscription.unsubscripte（）

在页面底部有一个非常方便的工具，可以帮助您为正确的行为选择正确的操作符

我不关心流，我希望它能工作，快而不脏：
如果您不想对代码进行太多更改，可以使用Resolve guard，它将在加载组件之前获取数据：

总之，您希望延迟渲染路由组件，直到获取所有必要的数据。
你需要一个解析器

您不能，您可以使用resolveAlreadyPaticipe检查用户是否为组成员。您不能，您可以使用resolveAlreadyPaticipe检查用户是否为组成员。您不能，您可以使用resolveAlreadyPaticipe检查用户是否为组成员。