Question

我有一个组件，它在顶部显示详细信息，并在API调用之后填充选择选项。我使用了select选项来确定下一条路线。

我已使用router-outlet根据所选选项加载组件。所有要加载的组件都是延迟加载的。

Template

<div>
    Detail Section
</div>

<div> Select Option Section </div>
<div>
    <router-outlet></router-outlet>
</div>

我的路由数组如下：-

const routes: Routes = [
  {
    path: ':id',
    component: ParentComponent,
    canActivate: [AppRouteGuard],
    children: [
        {
            path: 'path1',
            loadChildren:'path-to-module',
            canActivate: [AppRouteGuard]
       },
       ...
    ]
  }
];

说我有一个变量routeSelector，它确定要命中的路线。所有子路由都是延迟加载的模块。我需要routeSelector变量来确定要在API的每个Resolver中命中的Child Modules端点。

因此，当我第一次导航到上述路由数组的父路由（即/:id）时，我将该变量存储在服务中，以便可以在需要时订阅该值。

如果我导航到子路线，则选择任何选项，则一切正常。但是，如果我在子路由中，即/:id/path1，则在第一次点击时无法在解析器中获取routeSelector变量的值。随后，获取routeSelector值，从而调用API，但结果未反映在组件中。

Service Code

@Injectable()
export class ServiceName() {
   private subject$ = new BehaviorSubject('');
   constructor() { }  

   getRouteSelector() {
       return this.subject$ as Observable;
   }

   setRouteSelector(str: string) {
    this.subject$.next(str);
  }

}

Resolver Code

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<model1 | model2> {
    const id= route.params.id;
    let observable$: Observable<model1| model2>;

    this._routeSelectorService.getRouteSelector()
      .subscribe((routeSelector) => {
        if (routeSelector) {
          switch (routeSelector) {
            case 'Model 1':
              observable$ = this._model1Service.getModel1(id);
              break;
            case 'Model 2':
              observable$ = this._model2Service.getModel2(id);
              break;
          }
        }
      });
    return observable$;
  }
}

Component Code

ngOnInit() {
    this.routeDataSubscription = this.route.data.subscribe(
      ({ model}) => {
        this.model= model;
        // Checks if model is received or not and set a value to a bool
        // say `isDataReceived`
      }
    );
  }
}

Component Template Code

<div *ngIf="isDataReceived; else noData">
    Display the Model Value
</div>

<ng-template #noData>
   No Data Received
</ng-template>

因此，刷新页面时，我总是最终得到模板的else部分。

我该如何解决？任何帮助表示赞赏。

Answer 1

问题在于，observable$由于其异步特性，将始终在执行subscribe()之前始终返回。如果目标是从getModel1()或getModel2()返回一个可观察对象，则可以使用RxJS可管道运算符，例如switchMap()，而不要使用subscribe()：

import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// ...

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<model1 | model2> {
    const id = route.params.id;

    return this._routeSelectorService.getRouteSelector()
      .pipe(switchMap(routeSelector) => {
        if (routeSelector) {
          switch (routeSelector) {
            case 'Model 1':
              return this._model1Service.getModel1(id);
            case 'Model 2':
              return this._model2Service.getModel2(id);
            default:
              return of(null); // need to handle when not 'Model 1' or 'Model 2'
          }
        } else {
          return of(null); // need to handle falsy `routeSelector` value
        }
      });
  }
}

希望有帮助！

解析器未触发Angular中的“路由数据订阅”

1 个答案: