angular - icon - Ionic 2-Desactivar el botón Atrás para una vista específica

ionic disable back button android

Question

Así que estoy jugando un poco con Ionic 2 , y quiero saber cómo desactivar el botón Atrás para una vista específica.

Lo que estoy haciendo es this.nav.push(SomePage); Funciona, pero el NavController automáticamente pone un botón de retroceso allí para mí. ¿Cómo desactivo el botón Atrás?

NOTA: Sé que puedo usar this.nav.setRoot(SomePage) para configurar SomePage como root y no tener un botón de retroceso, pero eso no proporciona la animación útil que NavController hace automáticamente.

EDITAR: Esta pregunta es algo antigua, pero ha atraído algo de atención, por lo que creo que también sería apropiado mencionar para referencia futura que hay otra razón por la que no desea usar this.nav.setRoot para avanzar una página con sin botón de retroceso: borra la pila de páginas preexistente. Por lo tanto, si aún desea poder regresar a la página anterior en el código sin darle al usuario una forma de UI para hacerlo, setRoot no le permitirá hacer eso.

Answer 1

Ionic2 oculta el botón de menú, si no está en la página raíz y muestra el botón Atrás.

Como dijiste, la animación falta con:

this.view.setRoot(SomePage);

Escribe esto para una animación con "atrás" o "adelante":

this.nav.setRoot(SomePage, {}, {animate: true, direction: "forward"});

De acuerdo, ¿y si necesito la animación por defecto que se proporciona y no es "hacia adelante" o "hacia atrás"?

Hay algunas maneras:

1. Esto proporcionará la animación predeterminada

En tu página actual, escribe:

this.nav.insert(0, SomePage).then(() => {
    this.nav.popToRoot();
});

2. No lo configure como root por el motivo que sea

this.view.push(SomePage);

Está bien, ahora tenemos que encargarnos de ver cosas.

1. parte: Ocultar el botón Atrás
2. parte: Debido a que la página ya no es la raíz, tenemos que volver a mostrar el ícono de menú normal (de lo contrario, no habría ningún icono después de ocultar el botón Atrás).

Observe la propiedad menuIsHidden .

export class SomePage {
    // Part 2:
    menuIsHidden: boolean = false;

    constructor(private nav: NavController, private view: ViewController) {}

    // ionic2 will call this automatically
    ionViewWillEnter() {
        // Part 1:
        this.view.showBackButton(false);
    }
}

somePage.html

<ion-header>
 <ion-navbar>
    <button menuToggle [hidden]="menuIsHidden">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

Espero que esto ayude a alguien.

Answer 2

Para evitar que hideBackButton oculte el ícono de tu menú, utiliza este CSS en tu app.scss :

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}

o en caso de que desee que se muestre un lugar y en otro lugar, cambie su selector de la siguiente manera: ion-navbar[hidebackbutton].show-menu button[menutoggle]

Answer 3

Puede navegar a la página como un modal:

let modal = Modal.create(SomePage, navParams);
modal.onDismiss(datos => { 
//dissmiss callback 
});  
this.nav.present(modal );

Answer 4

Puede usar el siguiente Property Decorator en Ionic 2.0.0-rc.6

  <ion-header>
    <ion-navbar hideBackButton="true">
      <ion-title>
        Your page title
      </ion-title>
    </ion-navbar>
  </ion-header>

Referencia de documentos

Answer 5

Opción 1

hideBackButton en la vista agregando el atributo ion-navbar componente ion-navbar

<ion-navbar hideBackButton="true">
    <ion-title>Sub Page</ion-title>
</ion-navbar>

opcion 2

.showBackButton(bool) desde dentro de la clase de página utilizando el .showBackButton(bool) proporcionado por la clase ViewController

import { NavController, ViewController } from ''ionic-angular'';

export class SubPage {

    constructor(public navCtrl: NavController, private viewCtrl: ViewController) { }

    ionViewWillEnter() {
        this.viewCtrl.showBackButton(false);
    }

}

Un comentario de los documentos jónicos

Asegúrese de llamar esto después de ionViewWillEnter para asegurarse de que se haya procesado el DOM.

Nota

Me gustaría agregar que estas opciones no se tienen en cuenta cuando se presiona el botón de retroceso de hardware. Es probable que el botón de retroceso de hardware haga que la página activa salga de la pila de navegación.