3

Estoy desarrollando sobre NativeScript + Angular2. Mi pregunta es para saber si es posible llama de un modal desde otro modal. Cabe destacar que cuando lo coloco en una opción directa de un componente.html me realiza la función de forma correcta, excepto cuando la función que me despliega la coloco sobre la opción de un modal emergente.

Si no fui explícito por favor hacérmelo saber. He buscado en foros en inglés y español y nada positivo. Incluso en la documentación no establece ejemplo de montar un modal que invoque a otro. Quizá me estoy enredando yo mismo, pero lo requiero.

Gracias por su respuesta.

Edito (novato en la plataforma, si pueden modificar o editar en caso tal será muy agradecido)

html modal dialog 1

<StackLayout orientation="vertical" class="sl-opciones segoeL bold"> 
    <Label text="Llamar dialog 2" class="odd" (tap)="ir('dialog')"></Label></StackLayout>

opciones.component.ts

async ir(evts) {
    if(evts === "notificaciones"){
        console.log('entré en notificaciones');
        let opciones: ModalDialogOptions = {
            fullscreen: true,
            viewContainerRef: this.viewContainerRef
          }
          let seleccion = await this.modalService.showModal(modalDialog2, opciones);
    }
}

modal dialog 2 html

<GridLayout columns="*" rows="2*,4*,6*" width="auto" height="350">
<StackLayout orientation="horizontal" row="0" class="gl-head droidSans-Bold">


<StackLayout orientation="vertical" row="1" class="sl-body segoeL bold">
    <label textWrap="true" text="Ejemplo de modal 2" class=""></label>
</StackLayout>

<StackLayout orientation="vertical" row="2" class="segoeL bold">
    <GridLayout (tap)="close()" columns="*" width="250" height="45" horizontalAlignment="center" class="btn-group">
        <Label text="Si" col="0" class="btn-group-2_2 droidSans-Bold"></Label>
    </GridLayout> 

    <GridLayout (tap)="close()" columns="*" width="250" height="45" horizontalAlignment="center" class="btn-group">
        <Label text="No" col="0" class="btn-group-2_2 droidSans-Bold"></Label>
    </GridLayout> 
</StackLayout>

Quiero destacar que están bien llamadas, vuelvo y repito me funciona cuando creo un botón en un componente html cualquier y llamo al diálogo. Olvidaba colocar el error arrojado por la terminal Error

TypeError: Cannot read propoerty 'android' of undefined

Gracias nuevamente y perdón por lo novato en la plataforma

3
  • Podrías subir que es lo que intentaste y te da error? Para que pueda entender mejor la idea. el 22 mar. 2018 a las 18:39
  • Bienvenido @Leroy Carrasquero para ayudarte con la pregunta debe de tener un ejemplo mínimo verificable el 22 mar. 2018 a las 18:55
  • @FedericoMadoery vi la documentación oficial y verifiqué que no es posible llamar un modal dialog desde otro modal dialog. Se puede hacer un juego el cuál es cerrar el modal dialog primero y con otra función invocar el otro. De todas formas muchas gracias por la ayuda y disculpen lo mal formulada de la pregunta en cuestión. el 1 abr. 2018 a las 19:28

1 respuesta 1

3

En las últimas actualizaciones de Nativescript ya es posible hacer la navegación entre modales.

Pero te puedo poner los pasos a seguir para navegar entre ellos:

1.- Crear un componente de navegación:

import { Component } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";

@Component({
    moduleId: module.id,
    template: `<page-router-outlet></page-router-outlet>`
})
export class NavigationComponent {

    constructor(
        private routerExtensions: RouterExtensions,
        private activeRoute: ActivatedRoute
    ) {

        this.navigate();

    }

    public navigate() {

        this.routerExtensions.navigate(["primer-modal"], {
            animated: false,
            relativeTo: this.activeRoute
        });

    }
}

2.- Crear las rutas para la navegación:

const routes: Routes = [
    {
        path: "",
        component: AlgunComponent,
        data: { title: "Modal navigation" },
        children: [
            {
                path: "modal", component: ModalComponent
            },
            {
                path: "modal1", component: Modal1Component
            },
            {
                path: "modal2", component: Modal2Component
            },
            {
                path: "modal3", component: Modal3Component
            },
        ]
    }

3.- Desde el componente AlgunComponente lanzar el modal de NavigationComponent:

const options: ModalDialogOptions = {
            viewContainerRef: this.vcRef,
            context: "text",
            fullscreen: true
        };

        this.modalDialogService.showModal(NavigationComponent, options)
            .then(result => {

                // Algo

            });

4.- Una vez dentro de los modals la navegación se maneja de la siguiente forma:

this.routerExtensions.navigate(["../modal2"], {
            animated: false,
            relativeTo: this.activeRoute
        });

El link de referencia: https://docs.nativescript.org/angular/ui/ng-ui-widgets/modal-page

2
  • Fantástico, sí, estuve leyendo, es algo un poco ya de hace tiempo la pregunta y lo había resuelto de la forma tosca, sin embargo hace unos días estuve actualizando y probé un método no igual, pero si muy parecido guiandome de la página oficial, cambiando la lógica en unos puntos pero ya era por lo que yo requería, sin embargo es demasiado similar a lo que estableces en tu respuesta. el 7 sep. 2018 a las 15:46
  • Que bueno, saludos.
    – Alan Neri
    el 10 sep. 2018 a las 22:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.