В Angular2, как использовать разрешение и обещание подождать загрузки данных с сервера перед тем, как страница приложения отобразит маршрут - PullRequest
0 голосов
/ 08 марта 2019

Я работаю над приложением Angular 6. У меня есть требования для загрузки динамических маршрутов из базы данных. поэтому для достижения этого у меня есть инъекционный класс обслуживания Routes (DynamicRoutingService), который отвечает за загрузку статических и динамических маршрутов из базы данных и добавление в app.module.ts -> RouterModule.forRoot (RouteCollection).

В классе DynamicRoutingService я загружаю данные, используя метод подписки, моя проблема заключается в том, что страница запрошенного URL-адреса отображается до того, как метод подписки получит http-результат, следовательно, ошибка выброса приложения недопустимого маршрута.

Меня встречают решимость и обещание решить эту проблему, но я не уверен, что именно я это делаю, и именно здесь мне нужна помощь

распознаватель маршрута приложения

Injectable()
export class AppRoutingResolver implements Resolve<any>{

constructor(
    private router: Router
){}

resolve(route: ActivatedRouteSnapshot):Promise<any> | boolean{
    return false;
 }
}

app.component

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
 ) { 
 }
}

DynamicRoutingService

 @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-запрос для вызова 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 Ответ

2 голосов
/ 08 марта 2019

Я не уверен, что вы используете правильный подход здесь для загрузки динамических маршрутов.Резольверы в угловых значениях - это помощники, которые предварительно выбирают данные для назначенного маршрута.

Пример 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...