В mainPage.component мне нужно асинхронно получить данные о текущем пользователе и передать их в nav-bar.component, а там уже отобразить что нужно, с помощью *ngIf.
Мое приложение использует API Вконтакте.
У меня есть два основных сервиса: один получает данные от VK, другой от моей БД на хостинге. Делаю так: получаю данные от VK, проверяю права пользователя в своей БД и возвращаю готовый объект (пользователя с полем "role").
Так получаю пользователя:
getUser(): Observable<User> {
return new Observable<User> ((observer: Observer<User>) => {
VK.api("users.get", {"fields": "photo_50", "v":"5.92"},
function (data) {
if (!data) {
console.error('Не удалось получить данные о пользователе');
}
let res = data.response[0];
let temp = new User(0,'','','',0,0);
temp.id = res.id;
temp.first_name = res.first_name;
temp.last_name = res.last_name;
temp.photo = res.photo_50;
observer.next(temp);
observer.complete();
});
}
);
}
Так получаю права пользователя из БД:
checkRole(user: User): Observable<User> {
let params = new HttpParams().append('queryType', 'CHECK_Role')
.append('user_id', '' + user.id);
return this.http.post<any>(this.url, params).pipe(
map(res =>
new User (user.id,
user.first_name,
user.last_name,
user.photo,
user.rating,
Number(res[0].role)))
);
}
Еще есть сервис userService, который просто последовательно выполняет эти два запроса:
getViewer(): Observable<User> {
return this.vkAPIService.getUser().pipe(
concatMap(res => this.dbService.checkRole(res))
).pipe(take(1));
}
В основном компоненте следующий код:
viewer$: Observable<User>;
constructor (private userService: UserService) {
}
ngOnInit() {
this.viewer$ = this.userService.getViewer();
}
И в шаблоне основного компонента:
<ng-container *ngIf="(viewer$ | async) === null">
LOADING...
</ng-container>
<nav-bar [viewer] = "viewer$"></nav-bar>
Итог - ничего не работает, хотя аналогичные конструкции уже есть в моем приложении и работают отлично.