angular - 在Angular2中,如何使用resolve和promise在应用程序路由渲染页面之前等待从服务器加载数据
问题描述
我正在开发 Angular 6 应用程序。我有从数据库加载动态路由的要求。所以为了实现这一点,我注入了路由服务类(DynamicRoutingService),它负责从数据库加载静态和动态路由并添加到 app.module.ts --> RouterModule.forRoot(RouteCollection)。
在 DynamicRoutingService 类中,我使用 subscribe 方法加载数据,我的问题是请求的 url 页面在 subscribe 方法获取 http 结果之前呈现,因此应用程序抛出无效路由错误。
我遇到过使用 resolve 和 promise 来解决这个问题,但不确定我是否确实这样做了,这就是我需要帮助的地方
应用程序路由解析器
Injectable()
export class AppRoutingResolver implements Resolve<any>{
constructor(
private router: Router
){}
resolve(route: ActivatedRouteSnapshot):Promise<any> | boolean{
return false;
}
}
应用程序组件
export class AppComponent {
constructor(private routingService:DynamicRoutingService){
routingService.initializeDynamicRoutes(); // call service to reload routes
}
}
app.routing.module
@NgModule({
imports: [
RouterModule.forRoot(RouteCollection)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
constructor(
private router:Router
) {
}
}
动态路由服务
@Injectable({
providedIn: 'root'
})
export class DynamicRoutingService {
private dynamicRoutes: Route[] = [];
private waitToLoadRoutes: boolean = true;
private dynamicRoutesData: any;
private routeObject: any;
routeSubject: string = "survey";
static forEach: any;
constructor(
private router: Router,
private dynamicRoutesDataServices: DynamicRoutesDataServices
) { }
public initializeDynamicRoutes() {
this.loadDynamicRoutes();
}
public loadDynamicRoutes(): Route[] {
//LOADING DATA FROM DATABASE
this.dynamicRoutesDataServices.GetDynamicRoutesCollection(this.routeSubject)
.subscribe((result: any) => {
if (result) {
this.dynamicRoutesData = result
if (this.dynamicRoutesData) {
this.assembleDynamicRoutes();
}
}
});
return this.dynamicRoutes;
}
DataService调用http查询
export class DynamicRoutesDataServices{
constructor(
private getDynamicRoutesQuery:GetDynamicRoutesQuery
){}
public GetDynamicRoutesCollection(routesSubject: string): any{
this.getDynamicRoutesQuery.initialise(routesSubject);
var result = this.getDynamicRoutesQuery.execute();
return result;
}
}
Http Query 调用 API
@Injectable()
export class GetDynamicRoutesQuery extends BaseQuery<any>
{
private data:any;
public initialise(dynamicRouteSubject:string): void{
this.method = RequestMethod.Post;
if(dynamicRouteSubject){
this.data = {
RouteSubject: dynamicRouteSubject
}
}
this.setBody(this.data);
super.setEndPoint(`myside/GetDynamicRoutes`);
}
}
解决方案
我不确定您是否在此处使用正确的方法来加载动态路由。角度解析器是为分配的路线预取数据的助手。
示例 1:
RouterModule.forRoot([
{
path: 'team/:id',
component: TeamComponent,
resolve: {
team: TeamResolver
}
}
])
解析器将团队的信息存储在 ActivatedRoute 数据属性中的团队属性中。因此,您需要将其附加到现有路线。
https://angular.io/api/router/Resolve
https://codeburst.io/understanding-resolvers-in-angular-736e9db71267
推荐阅读
- r - R和SPSS线性模型结果之间的差异
- maven - Soapui 测试用例使用带有外部属性文件的命令行 mvn 运行
- ionic-framework - 离子 ssl 产生信任
- parsing - 如何检测 SpelExpressionParser 是否在上下文中找不到变量
- spring - Spring 5 如何使用 Log4jConfigListener
- node.js - 从循环异步发送多个请求
- java - Java 中的 BLS 签名方案:存储和加载密钥
- java - 为什么 Mockito ArgumentCaptor 会颠覆泛型
- android - Intent.FLAG_ACTIVITY_CLEAR_TOP 会清除 Anroid 中的所有其他后台应用程序吗?
- c# - 改变图片框#N