I enter a wallet number:

enter image description here

I click on the button

enter image description here

The user must be directed on the page /portfolio/stocks

Except that, the modal is always displayed.

enter image description here

select-portfolio-result-modal.component.html

<ng-container>
   <div >
      <h4  id="modal-title">
         Confirmation de la sélection
      </h4>
      <button type="button"  aria-label="Close button" aria-describedby="modal-title" (click)="close()">
      </button>
   </div>
   <div >
      <ng-container *ngIf="isLoading">
         <div >
            <div  role="status"></div>
         </div>
      </ng-container>
      <ng-container *ngIf="!isLoading">
         <div >
            <table >
               <thead>
                  <tr>
                     <th scope="col">
                        <!-- Portefeuille -->
                        Portefeuille
                     </th>
                     <th scope="col">
                        <!-- Intitulé -->
                        Intitulé
                     </th>
                  </tr>
               </thead>
               <tbody>
                  <tr *ngFor="let portfolio of portfolios; let i = index">
                     <td style="width: 30%">
                        <a (click)="selectPortfolio(portfolio)"  role="button">
                        {{ portfolio.REFERENCE }}
                        </a>
                     </td>
                     <td style="width: 70%">
                        {{ portfolio.COIN_LABEL }} {{ portfolio.INTITULE1 }} {{ portfolio.INTITULE2 }}
                     </td>
                  </tr>
                  <tr *ngIf="!portfolios.length && errorMessage">
                     <td colspan="4">{{ errorMessage }}</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </ng-container>
      <div >
         <button type="button"  (click)="confirm()">
         Confirm
         </button>
      </div>
   </div>
</ng-container>

select-portfolio-result-modal.component.ts

The problem is perhaps the confirm() method, below?

@Component({
  selector: 'app-select-portfolio-result-modal',
  templateUrl: './select-portfolio-result-modal.component.html',
  styleUrls: ['./select-portfolio-result-modal.component.scss']
})
export class SelectPortfolioResultModalComponent {

  constructor(private readonly router: Router) {}

  @Input() isLoading: boolean = false;

  @Output() selectedPortfolio = new EventEmitter<SelectPortfolio | undefined>();

  @Input() portfolios: SelectPortfolio[] = [];
  @Input() errorMessage?: string;

  selectPortfolio(ptf: SelectPortfolio): void {
    this.selectedPortfolio.emit(ptf);
  }

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

  
confirm(){
  this.router.navigateByUrl('/portfolio/select-portfolio'); 
 }

select-portfolio.component (c'est le TS, de la page qui doit être lancé après avoir entrer le numéro de wallet )

Do think you the TS file is correct, please?

export class SelectPortfolioComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();
  search = new SelectPortfolioModel();

  constructor(private service: SelectPortfolioService, private modalService: BsModalService, private router: Router) { }

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

  submit(): void {
    const modalRef = this.modalService.show(SelectPortfolioResultModalComponent, {
      ...NOT_CLOSABLE_MODAL_OPTIONS,
      class: 'modal-dialog-centered modal-lg',
      ariaLabelledBy: 'modal-error-title',
      initialState: {
        isLoading: true
      }
    });

    modalRef.content!.selectedPortfolio.pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((val: SelectPortfolio | undefined) => {
      if (val) {
        this.service.selectPortfolio(val).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(() => {
          this.router.navigate(['']);
        });
      }
      modalRef?.hide();
    });

    this.service.getPortfolios(this.search).pipe(
      takeUntil(modalRef.content!.selectedPortfolio)
    ).subscribe(res => {
      if (modalRef) {
        modalRef.content!.portfolios = res.PTF;
        const noResults = res.RETURNLIST.find(item => item.CODE === ApiResponseCodeEnum.Sch00);
        if (noResults) {
          modalRef.content!.errorMessage = noResults.TEXTE
        }
        modalRef.content!.isLoading = false;
      }
    });
  }
}

CodePudding user response：

You need close the modal before navigate.

I see that you're using ngx-bootstrap so, you need inject the bsModalService in your component

constructor(private readonly router: Router,
            private bsModalRef: BsModalRef){}

And

confirm(){
  this.bsModalRef.hide()
  this.router.navigateByUrl('/portfolio/select-portfolio'); 
 }

NOTE1: always is good to help you tell us what library are you using

NOTE2: In others modals, e.g. ng-bootstrap, you use the modalRef has a property "result" that it's a promise and is using this promise when you make the navigate

CodePudding user response：

You Should try this,

in ur confirm function

this.modalService.dismiss();

OR

this.modalService.dismissAll();