Angular 角度：基于条件为同一路由延迟加载不同路由模块的问题

我有一个应用程序，它有一个名为/opportunity/：id的路由

---

根据从API获取的值，我需要为上述路由加载不同的路由模块。例如：如果商机类型为v2，则加载v2模块；如果商机类型为v1，则加载v1模块

早期版本：app.routing.ts

我关注这个博客是为了实现我的目标——这就是我的代码现在的样子

现在：app.routing.ts

opportunity-v2.module.ts：

opportunity.service.ts：

现在我有个问题。 我无法使用ActivatedRoute或ActivatedRouteSnapshot从路由获取：id参数，这导致我使用路由器事件。有没有一种方法可以在不使用路由器事件的情况下获取路由参数

---

如果有人能提出更好、更有效的方法来实现我的目标，我也将不胜感激。我找到了其他几种替代方法，但它们都有自己的问题，如循环依赖等，我之所以采用这种方法，是因为它看起来更干净。

取决于从API获取的值

在从API获取值的组件构造函数中：

constructor(private route: Router) { }

在方法中，根据值将您的路由url放在下面：

this.route.navigateByUrl('/<set your url here>');

---

很抱歉，这与我的问题无关。

import { OpportunityService } from './../services/opportunity.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, ROUTES, Routes, ActivatedRoute } from '@angular/router';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule
  ],
  providers: [
    {
      provide: ROUTES,
      useFactory: configOppHandlerRoutes,
      deps: [
        OpportunityService,
        ActivatedRoute
      ],
      multi: true
    }
  ]
})


export class OpportunityRouteHandlerModule {}

export function configOppHandlerRoutes(opportunityService: OpportunityService, router: ActivatedRoute) {
  let routes: Routes = [];
  opportunityService.checkOpportunityType().subscribe((data: boolean) => {
    if (data) {
    routes = [
      {
        path: '',
        loadChildren: () => import('./../content/opportunity/opportunity.module').then(m => m.OpportunityModule),
        resolve: { content: TranslationService }
      }
    ];
  } else {
    routes = [
      {
        path: '',
        loadChildren: () => import('./../content/opportunity-v2/opportunity-v2.module').then(m => m.OpportunityV2Module),
        resolve: { content: TranslationService }
      }
    ];
  }
  return routes;
  });
}

import { map } from 'rxjs/operators';
import { ErrorService } from 'app/services/error.service';
import { AppApolloService } from 'app/services/app.apollo.service';
import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, Event } from '@angular/router';
import { OpportunityQuery } from './opportunity.graphql';

@Injectable({
  providedIn: 'root'
})

export class OpportunityService {
  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private appApollo: AppApolloService,
    private errorService: ErrorService) {
  }

  public checkOpportunityType() {
    // this.activatedRoute.paramMap.subscribe((params: any) => {
    //   console.log('params', params);  // This returns empty params
    //   return true;
    // });
    // return this.activatedRoute.queryParamMap.subscribe(data => {
    //   console.log('data');  // This returns empty params
    // });
    return this.router.events.pipe(map(async (event: Event) => {
      let currentUrl;
      if (event instanceof NavigationEnd ) {
        currentUrl = event.url;    // value is '/opportunity/9432?apply=true'
        let oppId = currentUrl.split('/')[2].split('?')[0];  // very messy but works. Need better solution.
        return await this.getOpportunity(+oppId);
      }
    }));
  }

  getOpportunity(oppId) {
    return this.appApollo.query(OpportunityQuery, {id: oppId})
    .then((response: any) => {
      const opportunity = response.getOpportunity;
      if ((+opportunity.programme.id === 1) || (+opportunity.programme.id === 2) || (+opportunity.programme.id === 5)) {
        return true;
      } else {
        return false;
      }
    }, err => {
      this.errorService.error.next(true);
      this.errorService.errorDetails.next(err.networkError);
    });
  }
}

constructor(private route: Router) { }

this.route.navigateByUrl('/<set your url here>');