[英]In Angular2, how to use resolve and promise to wait data load from server before app route render page
I am working on Angular 6 application. 我正在开发Angular 6应用程序。 I have requirements to load dynamic routes from database.
我有从数据库加载动态路由的要求。 so to achieve this I have injecting Routes service class (DynamicRoutingService) which is responsible to load static and dynamic routes from database and add in app.module.ts --> RouterModule.forRoot(RouteCollection).
为此,我注入了Routes服务类(DynamicRoutingService),该类负责从数据库加载静态和动态路由,并添加app.module.ts-> RouterModule.forRoot(RouteCollection)。
In DynamicRoutingService class, I am loading data using subscribe method, my issue is the page of requested url is render before subscribe method get http result hence, application throw error of invalid route. 在DynamicRoutingService类中,我正在使用Subscribe方法加载数据,我的问题是在Subscribe方法获得http结果之前呈现请求的url页面,因此,应用程序抛出无效路由错误。
I am come across to use resolve and promise to solve this but not sure exactly I do that and that is where I need help 我碰巧使用决心并承诺解决这个问题,但不确定我是否确实做到这一点,那是我需要帮助的地方
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
}
}
@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;
}
export class DynamicRoutesDataServices{
constructor(
private getDynamicRoutesQuery:GetDynamicRoutesQuery
){}
public GetDynamicRoutesCollection(routesSubject: string): any{
this.getDynamicRoutesQuery.initialise(routesSubject);
var result = this.getDynamicRoutesQuery.execute();
return result;
}
}
@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`);
}
}
I am not sure if you are using the correct aproach here to load dynamic routes. 我不确定您是否在此处使用正确的方式加载动态路由。 Resolvers in angular are helpers that prefetch data for an assigned route.
角解析器是为指定路由预取数据的助手。
Example 1: 范例1:
RouterModule.forRoot([
{
path: 'team/:id',
component: TeamComponent,
resolve: {
team: TeamResolver
}
}
])
The resolver stores the info of the team in team property in the ActivatedRoute data property. 解析程序将团队的信息存储在ActivatedRoute数据属性的team属性中。 So you need to attach it to an existing route.
因此,您需要将其附加到现有路线。
https://angular.io/api/router/Resolve https://angular.io/api/router/Resolve
https://codeburst.io/understanding-resolvers-in-angular-736e9db71267 https://codeburst.io/understanding-resolvers-in-angular-736e9db71267
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.