2017-12-04 5 views
5

ich deaktiviert haben ‚Swipe zurück‘ weltweit sowohl in root Komponenten- und ModulkonfigurationsIonic 3 ermöglichen Swipe zurück für eine einzelne Seite

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav> 

... 
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}), 
... 

ich aber brauche es nur für eine Seite zu ermöglichen. So versuche ich es zu setzen, indem ich eine Nav-Instanz an den Konstruktor übergebe und swipeBackEnabled dann auf true setze.

ionViewWillEnter() { 
    this.nav.swipeBackEnabled = true; 
    console.log('swipeBackEnabled ' + this.nav.swipeBackEnabled); 
    console.log('canGoBack ' + this.nav.canGoBack()); 
    console.log('canSwipeBack ' + this.nav.canSwipeBack()); 
} 

Logging swipeBackEnabled und canGoBack gibt true zurück, aber canSwipeBack gibt false zurück. Wenn ich ein Swipe-Ereignis irgendwo in meiner Vorlage hinzufüge und diese Werte beim Rechtsdurchstreichen protokolliere, protokolliert es alle Werte als wahr. Es passiert jedoch nichts, scheint wie wipback funktioniert nicht? Fehle ich etwas?

Als Referenz verwende ich Ionic 3.9.2 und @ ionic/app-Skripte 3.1.4. Vielen Dank im Voraus

+0

Was ist dein 'this.nav'? – Duannx

+0

@duannx es ist eine Instanz eines ionischen nav 'Import {Nav} von" ionic-angular ";' – vitalym

+1

Ändern Sie es einfach zu 'navCtrl', die injiziert in' Konstruktor' – Duannx

Antwort

0

Ich bin nicht ganz sicher, Was hat der Trick hier, aber die folgende Einrichtung hat es für mich funktioniert:

public ionViewWillEnter(): void { 
    this.appNav.swipeBackEnabled = true; 
} 

public ionViewWillUnload(): void { 
    this.appNav.swipeBackEnabled = false; 
} 

appNav hier ist ein n Instanz des ionischen NavControllers.Ich verstehe noch nicht ganz, warum das Einstellen von swipeBackEnabled in anderen Lebenszyklus-Hooks es nicht geschafft hat, also werde ich später weiter untersuchen. Dies könnte ein Ausgangspunkt für jemanden sein, der dasselbe Problem hat.

0

Erstellen Sie eine ID für Ihr ion-Menü wie ich das Hauptmenü gegeben habe. um in Ihrem Controller-Teil darauf zuzugreifen.

app.html

<ion-menu [content]="appNav" id="main-menu"> 
.... 
.... 
</ion-menu> 
<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav> 

in Ihrem app.component.ts in Ihrem Konstruktor Stelle den Code unten Datei

menuCtrl.swipeEnable(false, 'main-menu'); 

so der obige Code fungiert als das seitliche Menü Swipe deaktivieren zu Öffnen Sie die Funktionalität über die gesamte App.

kann sagen, dass Sie die Swipe aktivieren mögen in der Seite nur eine Seite im Menü zu öffnen, damit der folgenden Code hinzufügen

this.menuCtrl.swipeEnable(true, 'main-menu'); 

dies die Swipe ermöglichen, die Seite Menüfunktionalität zu öffnen.

Hinweis: Sobald Sie die swipeEnable verwendet (True, "Hauptmenü"); Dies wird in der Lage sein, auf die gesamte App zuzugreifen. Um es aufzulösen, verwenden Sie nur eine der respektierten Seitenseiten und deaktivieren Sie die vorherige Seite und die nächste Seite, die der aktuellen Seite entsprechen.

nur auf der aktuellen Seite aktivieren und deaktivieren Sie es auf der Vorder- und Rückseite des aktuellen Seite

UPDATE:

ein anderer Weg, dies zu achive ist es aktivieren und deaktivieren auf der selben Seite.

ionViewDidEnter(){ 
    this.menuCtrl.swipeEnable(true, 'main-menu'); 
} 

und es auf der gleichen Seite deaktivieren, indem Sie ionviewdidleave

ionViewDidLeave(){ 
    this.menuCtrl.swipeEnable(false, 'main-menu'); 
} 

So ist der obige Code die beiden Verfahren tun Aktivieren und Deaktivieren der Seitenmenü

Verwandte Themen