Subroutes or nested routes in Ionic/Angular

Question

I'm curios how to achieve the following:

I have a tree structure: Senior Managers -> Managers -> Associate Managers -> Consultants

1. Managers shows a list of Senior Managers /managers
2. The route managers/:id selects a certain manager of course
3. Now managers have associated staff and timetables for example. I want a stable navigation at this level, where a user can choose between staff /managers/:id/staff and timetables /managers/:id/timetables .

So I thought about having a usual

<ion-app>

  <ion-router-outlet id="main-content"></ion-router-outlet>

</ion-app>

Where managers-route and the managers-id-route is defined.

Inside the page, where managers-id-route leads to, the must be something like the nav and second router-outlet right?

<nav>Static Nav</nav>
<ion-router-outlet id="aux-content"></ion-router-outlet>

Or is my way of thinking wrong? Where can I see such a thing by example?

Answer 1

I would do this with reusable components. And then with each selection just call your api. Here is some sudo code:

app.html

<ng-container *ngIf="seniorManagerData$ | async as smd">
  <app-senior-manager-view [inputData]="smd">
  </app-senior-manager-view>
</ng-container>

app-senior-manager.page.html

<ng-container *ngIf="managerData$ | async as md">
  <app-manager-view [inputData]="md" [seniorManager]="seniorManagerSelection" *ngIf="seniorManagerSelection">
  </app-manager-view>
</ng-container>

app-manager.page.html

<ng-container *ngIf="associateManagerData$ | async as amd">
  <app-associate-manager-view [associateManager]="associateManagerSelection" *ngIf="associateManagerSelection" [inputData]="amd">
  </app-associate-manager-view>
</ng-container>

app-associate-manager.page.html

<ng-container *ngIf="consultantData$ | async as cd">
  <app-consultant-view [consultant]="consulantSelection" *ngIf="consultantSelection" [inputData]="cd">
</ng-container>

Each component could have an api service injected into it which would call your back end data to load the appropriate info. No need to use ionic/angular routes at all.

So some pseudo code again along the lines of:

seniorManagerData$ :Observable<unknown>;

seniorManagerSelection: unknown;

constructor( myApi: ApiService) {}

viewWillEnter() {
   //do this within a loading controller, don't block your UI
   this.seniorManagerData$ = this.myApi.getSeniorManagerData();
}

onSeniorManagerSelection(mySelection: unknown) {
   this.seniorManagerSelection = mySelection;
}

Again this is just pseudo code which probably needs adjustment within an actual project. But hopefully this gives some idea.