angular - 如何防止 BehaviourSubject 在定义之前被使用？

Question

我正在开发一项用户服务，通过用户的 user_id 跟踪用户。它首先检查 user_id 是否存在于他们的 cookie 中，如果不存在，它会向 api 发出获取请求以创建一个新的并在响应中返回 id。我的问题是 user_id 在响应完成之前被消耗掉了。我有两个问题:

1. BehaviourSubject 甚至在被定义为新的 BehaviourService 之前就已被使用，使用它的组件在 undefined 上调用 .subscribe() 结果导致应用程序崩溃。
2. 我真的有必要在每次检索 user_id 时都订阅它吗？由于我首先订阅了 behaviorsubject，然后在订阅方法中编写我的代码，因此代码变得难以处理。我想不出更好的方法来解决这个问题，从我读过的文本中他们提到链接流是正确的方法，但这感觉很不对。

这是我正在做的一个简化示例

获取 ruid 或创建一个 - user.service.ts

constructor(...) {
    public ruid: BehaviorSubject<any>;
    if(!Cookies.get('ruid')) {
        this.http.get(url).subscribe(
            (value) => {
                this.ruid = new BehaviorSubject(value)
                Cookies.set('ruid', value)
            }
        )
    } else {
        this.ruid = new BehaviorSubject(Cookie.get('ruid'));
    }
}

在组件中使用ruid

constructor(private userService: UserService) {
    data;
    this.userService.ruid.subscribe(
        (value) => {
            this.data = this.http.get(url + value).map(res => res.json())
        }
    );
}

Answer 1

我相信您在这里需要的是在您的路线上设置解析器。请参阅下面真实项目中的示例:

解析器.ts

@Injectable()
export class LocationResolver implements Resolve<any> {
    constructor(private  locationsApiService: LocationsApiService, private appStorage: AppStorage, private authService: AuthService) {

    }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return new Observable((observer) => {
            const sessionData = this.authService.getSessionData();

            if (!sessionData.Location) {
                this.locationsApiService.getUserLocations().subscribe(
                    locations => {
                        sessionData.Location = locations[0].Name;
                        sessionData.LocationId = locations[0].Id;

                        this.authService.updateSessionData(sessionData);
                        this.appStorage.set(AppConstants.storage.userLocations, locations);

                        observer.next(sessionData.LocationId);
                        observer.complete();
                    }
                );
            } else {
                observer.next(sessionData.LocationId);
                observer.complete();
            }
        });
    }
}

路线

{
        path: 'app',
        component: MainComponent,
        canActivate: [AuthGuard],
        resolve: {
            locationId: LocationResolver
        },
        children: [...]
}

基本上它所做的是在获得必要的数据之前不解析路由。在我的例子中，我需要查询 locationId 并在登录后将其提供给每个调用。因此，解析器要么在 LocalStorage 中查找它，要么调用 API，然后设置位置。

UPD:在您的情况下，您可以将此类解析器放在订阅 BehaviorSubject 的路由上，并且在您完成所有 API 调用之前它不会被实例化和订阅。