Dos opciones posibles:

1. Tener un tema para el resultado seleccionado que es "siguiente" ya sea por la entrada del usuario o un efecto secundario de obtener un resultado de API con un elemento.
2. Hacer un seguimiento de un estado general del componente y responder adecuadamente cada vez que se establece un resultado seleccionado en el estado.

El siguiente ejemplo es un boceto del uso de un Observable para realizar un seguimiento del estado del componente.

• Hay dos flujos de entrada en el estado, los resultados de la API y la entrada del usuario para el resultado seleccionado.
• Cada flujo se convierte en una función reductora que modificará el estado general.
• La interfaz de usuario debe suscribirse a este estado a través de una canalización asíncrona, mostrando el modal cuando corresponda y actualizando el estado de actualización de los eventos a través de los Sujetos.
• La redirección debería ser un efecto del cambio de estado cuando el resultado seleccionado tiene un valor.

 readonly getResultsSubject = new Subject<MyInput>(); readonly resultSelectedSubject = new Subject<ResultType>(); private readonly apiResults$ = this.getResultsSubjects.pipe( switchMap((input) => this.apiMethod(input)) ); readonly state = combineLatest([ this.apiResults$.pipe(map(results => (s) => results.length === 1 ? { ...s, results, selectedResult: x[0], showModal: false } : { ...s, results, showModal: results.length > 1 })), this.resultSelectedSubject.pipe(map(selectedResult => (s) => ({ ...s, selectedResult }))) ]).pipe( scan((s, reducer) => reducer(s), { }), shareReplay(1) ); ngOnInit() { this.state.pipe( filter(x => !!x.selectedResult) ).subscribe(x => this.router.navigate('elements/', x.selectedResult.id)); }

Últimamente estoy usando mucho este patrón. Hace que sea bastante fácil que crezca el número de acciones y propiedades del estado.

Crearía un DialogComponent que tome la lista de opciones como entrada y emita el elemento elegido cuando esté cerrado.

Luego, cree un método auxiliar ( quizás promptUser ) que simplemente devuelva un observable que emita el valor seleccionado:

 this.apiService.apiMethod(input) .pipe( switchMap(results => results.length > 1 ? this.promptUser(results) : of(results[0]) ) ) .subscribe( result => this.router.navigate('elements/', result.id) );

Aquí simplemente usamos switchMap para devolver un observable que emita el elemento adecuado. Si la longitud es mayor que 1, devolvemos el método auxiliar que muestra el cuadro de diálogo y emite el elemento elegido; de lo contrario, solo emitimos el primer ( único ) elemento. Tenga en cuenta que envolvimos el valor simple con of ya que dentro de switchMap, necesitamos devolver observable.

En cualquier caso, el elemento deseado es emitido y recibido por su devolución de llamada de suscripción.

Lo resolvería usando el siguiente método:

1. Obtenga los datos con su suscripción (sin la tubería). Y guarde estos datos en la variable componente.

 options: any; this.apiService .apiMethod(input) .subscribe( (result) => { if (result.length === 1) { this.router.navigate([result[0]]); return; } options = result; } )

2. con un ngIf en el modal (condicional de la longitud de la matriz de opciones> 0 muestra el componente con las diferentes opciones cuando se reciben los datos

 <modal-component *ngIf="options.length > 0"></modal-component>

3. cuando el usuario (haga clic) en una opción dentro de su modal, use el enrutador para redirigir.

 html <div (click)="redirect(value)">option 1</div> ts redirect(value) { this.router.navigate([value]); }

eso seria lo mas directo