'How to handle multiple routes in the modal?

Here is a shema with several pages, component and a modal

shema

I have 3 pages which are create-dta, delete-dta and follow-up-dta.

For each page (create-dta, delete-dta, follow-up-dta), I have the same search form. I created a search-dta component.

I call the compose search-dta on create-dta. It works...

picture1

When I press the search button, a modal appears. The modal is named search-dta-result, the parent is search-dta.

modal ok

I click on the hyperlink

I am directed to the dta-create-result page.

enter image description here

Everything is working for now! Here is the path:

create-dta > search-dta > search-dta-result > create-dta-result

search-dta.component.ts

submit(): void {
    
    if (!this.isModal) {      
      const modalRef = this.modalService.show(SearchDtaResultModalComponent, {
        ...SEARCH_TITLE_MODAL_OPTIONS,
        initialState: {
          title: this.title ,
          isLoading: true,
          disabledSvm: this.disabledSvm,
          showWarnings: this.showWarnings
        }
      });
      modalRef.content!.selectedPersonnePhysiqueDta.pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe((val: PersonnePhysiqueDta | undefined) => {
        this.selectPersonnePhysiqueDta(val);
        this.router.navigate([
          "/dta/create/" 
          + val?.NUMEROREGISTRENATIONAL 
          + "/" 
          + this.search.country 
          + "/"
          + this.search.fiscalYear 
       ]);
        modalRef?.hide();
      });

      this.searchDta(true).pipe(
        takeUntil(modalRef.content!.selectedPersonnePhysiqueDta)
      ).subscribe(res => {
        if (modalRef ) {
          modalRef.content!.isLoading = false;
          modalRef.content!.personnePhysique = res.DTA.PP;
          if (!res.DTA.PP) {
           modalRef.hide();
          }
        }
      });
    } else {
      this.searchDta(false).pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res => {
        this.data = res;
        
      });
    }
  }

search-dta.component.html

<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && submit()" id="SearchDta">
<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="registreNational" class="form-label">Numéro de registre national</label>
   </div>
   <div class="col-4">
      <input id="registreNational" name="registreNational" type="text" class="form-control" name="registreNational" style="min-width: 380px" [ngModel]="search.registreNational" (ngModelChange)="search.registreNational  = $event;changeState()" maxlength="25"
      />
   </div>
</div>
<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="fiscalYear" class="form-label">Année exercice</label>
   </div>
   <div class="col-4">
      <input id="fiscalYear" name="fiscalYear" type="text" class="form-control" name="fiscalYear" style="min-width: 380px" [(ngModel)]="search.fiscalYear" maxlength="10">
   </div>
</div>
<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="country" class="form-label">Pays</label>
   </div>
   <div class="col-4">
      <input id="country" name="country" type="text" class="form-control" name="country" style="min-width: 380px" [(ngModel)]="search.country" maxlength="10">
   </div>
</div>
<div class="row row-cols-3 pt-3">
   <div class="col"></div>
   <div class="col text-start">
      <button type="submit" class="btn btn-primary" style="background-color: #239CD3;" [disabled]="formulaire.form.invalid">Recherche</button>
   </div>
</div>
</form>

create-dta.component.html

<div class="home-content container ">
    <div class="pt-50">
        <h1 class="text-center pb-3">Création d'un formulaire</h1>
        <app-search-dta [title]="'Informations sur valeur'" (selectedPersonnePhysiqueDta)="goTo($event)" [showWarnings]="true"></app-search-dta>
    </div>
</div>

create-dta-component.ts

  ngOnInit(): void {

  }
  
  goTo(personnePhysique: PersonnePhysiqueDta | undefined): void {
    if (personnePhysique) {

    }
  }

search-dta-result-component.html

<ng-container>
   <div class="modal-header ">
      <h4 class="modal-title" id="modal-title">
         Confirmation de la sélection
      </h4>
      <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="close()">
      </button>
   </div>
   <div class="modal-body">
      <ng-container *ngIf="isLoading">
         <div class="d-flex align-items-center justify-content-center">
            <div class="loader-bubble loader-bubble-primary" role="status"></div>
         </div>
      </ng-container>
      <ng-container *ngIf="!isLoading">
         <div class="table-responsive">
            <table class="table table-striped">
               <thead>
                  <tr>
                     <th scope="col">
                        Registre national
                     </th>
                     <th scope="col">
                        Nom
                     </th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                  <tr *ngIf="personnePhysique">
                     <td style="width: 30%">
                        <a (click)="selectPersonnePhysiqueDta(personnePhysique)" class="link-primary" role="button">
                        {{ personnePhysique.NUMEROREGISTRENATIONAL }}
                        </a>
                     </td>
                     <td style="width: 70%">
                        {{ personnePhysique.NOMFAMILLE }}
                     </td>
                  </tr>
                  <tr *ngIf="!personnePhysique && errorMessage">
                     <td colspan="4">{{ errorMessage }}</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </ng-container>
   </div>
</ng-container>

search-dta-result.component.ts

ngOnInit(): void {
   }
 
   ngOnDestroy(): void {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }
   

   selectPersonnePhysiqueDta(personnePhysique: PersonnePhysiqueDta): void {
    this.selectedPersonnePhysiqueDta.emit(personnePhysique);
  } 


  close(): void {
    this.selectedPersonnePhysiqueDta.emit(undefined);
  }

  goBack(): void {
    this.modal.hide();
      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => { 
    }); 
 
  }

My problem ! If I am on the delete-dta page I don't get to the delete-dta-result page at the end.

here is the path: delete-dta > search-dta > search-dta-result > create-dta-result

I am on delete-dta page

delete-dta

The modal calls create-dta-result, I want to get delete-dta-result.