wake-up-neo.net

NavController funktioniert nicht in Ionic 4

Ich füge NavController in meinen Konstruktor ein, da ich eine Seite verschieben möchte. Der folgende Code funktioniert jedoch nicht in Ionic 4. In Ionic 3 war das völlig in Ordnung.

Konstrukteur

constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
    this.menuCtrl.enable(true);
   }

Methode

goToSecondPage()
  {
    this.navCtrl.Push(list);
  }

 Error

8
Abhijit M. Abhi

Um den letzten Schritt abzuschließen und diese Routen in unserer Datei app-routing.module.ts zu implementieren, würden sie folgendermaßen aussehen:

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: './pages/home/home.module#HomeModule' },
{ path: 'products', loadChildren: './pages/products/products.module#ProductsModule'},
{ path: 'products/:id', loadChildren: './pages/product-detail/product-detail.module#ProductDetailModule' },
{ path: 'products/categories', loadChildren: './pages/product-categories/product-categories.
{ path: 'support', loadChildren: './pages/support/support.module#SupportModule' }
];

setRoot in der HTML-Seite

<ion-button href="/support" routerDirection="root">

oder in der Klasse

this.navCtrl.navigateRoot('/support');

Drücken

<ion-button href="/products/12" routerDirection="forward">

oder 

this.navCtrl.navigateForward('/products/12');

Pop

<ion-button href="/products" routerDirection="backward">

oder

<ion-back-button defaultHref="/products"></ion-back-button>

sie können auch programmatisch rückwärts navigieren:

this.navCtrl.navigateBack('/products');

p/s: https://www.joshmorony.com/converting-ionic-3-Push-pop-navigation-to-angular-routing-in-ionic-4/

11

erster Import-Navcontroller importiere {NavController, AlertController} von '@ ionic/angle'; und jetzt gehen Sie auch vorwärts, unterstützen Sie nicht, es war das Beste in ionic 3 this.nav.navigateForward ('/ ChatPage') in ionic 4 unterstützt, aber meiner Meinung nach sollte Winkelrouting verwendet werden 

2
wagi malick
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
 ...
})
export class LoginComponent {
 constructor(private router: Router){}

    navigate(){
       this.router.navigate(['/detail'])
    }
}

für mehr Infos hier klicken

NavController, da dieser in IONIC 4 veraltet ist.

Struktur ist so.

     V3                 V4
/src/pages ->      /src/app/pages
/src/models ->     /src/app/models
/src/providers ->  /src/app/providers
  • Sie können Seiten verwenden, wenn Sie ein Seitenverzeichnis haben.
  • Sie können Parameter verwenden, wenn Sie sie übergeben möchten.

    this.router.navigate ('/ pages, {locs: this.locId}])');

Beispiel: Mit Pages-Verzeichnis.

this.router.navigate(['/list', { locs: this.locId }]);

Beispiel: Ohne Pages-Verzeichnis und -Parameter.

this.router.navigate(['/list');

Dieser Link ist nützlich für die Registerkarten . Weitere Informationen erhalten Sie über diesen Link . [ https://medium.com/modus-create-front-end-development/upgrading-an-ionic-3 -Anwendung auf ionische-4-eaf81a53cdea] [1]

2
Mihir Patel
this.navCtrl.Push(list);

In Ionic 4 funktioniert es nicht. Ionic 4 basiert auf Angular Routing. Verwenden Sie also einfach den folgenden Code und schreiben Sie dafür eine Route.

this.navCtrl.goForward('/list');

Für die Zurück-Taste in der NavBar

Fügen Sie folgenden Code in <ion-toolbar> </ion-toolbar> für die Schaltfläche "Zurück" auf der zweiten Seite ein.

<ion-buttons slot="start">
      <ion-back-button  defaultHref="home"></ion-back-button>
    </ion-buttons>
2
Abhijit M. Abhi

IONIC 4 - Winkel (ionischer Start appName - Typ = Winkel)

Physical Back-Taste und Back-Taste-Menü

Führen Sie auf der Zielseite (zweite Seite) Folgendes aus:

SecondPage TS

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { Platform } from '@ionic/angular';

    @Component({
      selector: 'app-second',
      templateUrl: './second.page.html',
      styleUrls: ['./second.page.scss'],
    })
    export class SecondPage implements OnInit, OnDestroy {

        inscBackAction: Subscription;
        element: HTMLElement;

        constructor(
          private router: Router, 
          public platform: Platform) {
        }

        ngOnInit() {    
          this.inscBackAction = this.platform.backButton.subscribe(() => {
            // Check this log in chrome: "chrome://inspect/#devices"
            console.log('Physical Back Button');                

            this.element = document.getElementById('backButton') as HTMLElement;
            this.element.click();
            // OR
            // this.router.navigate(['/anyPage']);

          }, error => {
            console.log('\n\nERROR:\n' + error.message + '\n\n');
          });
        }

        ngOnDestroy() {
          this.inscBackButton.unsubscribe();
        }
    }

SecondPage HTML

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <!-- Does not work with #backButton -->
      <ion-back-button id="backButton" defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>
      Second
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding></ion-content>

_

P.S .:

Kann für Menülinks in HTML erforderlich sein:

[routerDirection] = "'forward'"

Wie in "app.component.html" für Projekte sidemenu

<ion-item [routerDirection]="'forward'" [routerLink]="[p.url]">

Weitere Informationen: https://beta.ionicframework.com/docs/api/buttons/

1
Cesar Devesa

Sie können dies einfach mit "import {navController} from 'ionic-angulr'" beheben. Dies führt jedoch zu einem Fehler bei Rxjs. Vielleicht willst du das machen ...

Stellen Sie in Ihrer App-routing.module.ts sicher, dass Ihre Seiten und ihre Module im Pfad und in loadChildren korrekt angegeben sind. Hier ist meins

const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' },

{ path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
];

In meiner login.page.html habe ich dies verwendet, um zu registerPage zu navigieren

<ion-button size="large" routerLink="/register" routerDirection="forward" expand="block" #btnregister fill="clear" color="primary">Register</ion-button>
1
Dart Vadar

Try (in ionic 4)

import { NavController } from '@ionic/angular';

anstelle von (in ionisch)

import { NavController } from 'ionic-angular'
1
bunny

this.deeplink.route ({'/ registration /: userid': RegistrationPage, '/ registration': RegistrationPage,}). subscribe ((match) => {
this.router.navigateByUrl (match. $ link.path, match. $ args)
console.log ("Deeplink =>", match);

    }, err => {
      console.log("Deeplink Error=>", err)
      alert("Deeplink Error=>" + err)
    })
})
0
Raj Gond