angular - 如何从 AngularFirestore 获得一个可观察的回报并解决我的路由器守卫
问题描述
问题:我如何调用 firestore 并使用从 firestore 返回的有效负载解决我的路由器守卫?
问题:我的路由解析保护没有得到解决,即使来自 firestore 的值被返回并被定义。
import {
ActivatedRouteSnapshot,
Resolve,
RouterStateSnapshot,
} from '@angular/router';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
@Injectable()
export class RouteResolve implements Resolve<any> {
constructor(private db: AngularFirestore) {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
return this.db
.collection('routes')
.doc('work')
.valueChanges()
.pipe(
map((item) => {
if (item) {
console.log('items', item) // this logs just fine.
return item; // this doesen't resolve the router guard.
}
}));
}
}
一切正常,但已完成解决。如果我只返回 true,则解析按预期工作。
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return true; // this will resolve just fine
}
解决方案
添加pipe(first())
到您的valueChanges()
可观察对象。Angular 路由器一直等到 observable 完成,这样做可以确保 observable 在第一次值更改后完成。
return this.db
.collection('routes')
.doc('work')
.valueChanges()
.pipe(first())
.pipe(
map((item) => {
if (item) {
console.log('items', item) // this logs just fine.
return item; // this doesen't resolve the router guard.
}
}));
推荐阅读
- php - 我正在将 magento 1 的自定义 php 转换为 magento 2
- javascript - !+[] 表达式如何在 javascript 中工作
- excel - excel中多项式趋势线的准确性
- docker - 如何将 vertx/JDBCClient 类添加到 dockerfile
- node.js - Ejs 包含路由 url
- networking - 互联网上的唯一 IP 地址?
- google-cloud-platform - 在为 container.clusters.get 创建服务账户 JSON 时,我应该在 GCP IAM 控制台中选择哪个权限?
- python - 如何传递一个 url contains ?, / , & 内部烧瓶 webservice 方法
- python - 类变量在 for 循环中保持为空
- excel - EXCEL VBA 将多列转换为多行,列之间有间隙