NavController не работает в Ionic 4

Ответ 1

Теперь, чтобы завершить последний шаг и реализовать эти маршруты в нашем файле app-routing.module.ts, они должны выглядеть следующим образом:

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 на HTML-странице

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

или в классе

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

От себя

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

или же

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

поп

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

или же

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

Вы также можете перемещаться назад программно:

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

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

Ответ 2

NavController, поскольку это устарело в IONIC 4.

Структура такая.

     V3                 V4
/src/pages     ->   /src/app/pages
/src/models    ->   /src/app/models
/src/providers ->   /src/app/providers

• Вы можете использовать страницы, если у вас есть каталог страниц.

• Вы можете использовать параметры, если вы хотите передать его.

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

Пример: с каталогом страниц.

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

Пример: без каталога страниц и параметров.

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

Эта ссылка полезна для вкладок. Для получения дополнительной информации перейдите по этой ссылке. [ https://medium.com/modus-create-front-end-development/upgrading-an-ionic-3-application-to-ionic-4-eaf81a53cdea][1]

Дополнительно:

После перехода на новую страницу мы можем получить locsId, используя this.route.snapshot.paramMap.get('locs'), импортировав private route: ActivatedRoute внутри конструктора текущей страницы

Пример:

export class ListPage implements OnInit {

  constructor(private route: ActivatedRoute) {
    console.log("this.route.snapshot.paramMap.get : ", this.route.snapshot.paramMap.get('locs'));
  }

  ngOnInit() {
  }

}

Ответ 3

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

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

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

Для дополнительной информации щелкните здесь

Ответ 4

Попробуй (в ионике 4)

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

вместо (в ионном 3)

import { NavController } from 'ionic-angular'

Ответ 5

this.navCtrl.push(list);

Он не работает в Ionic 4. Ионный 4 основан на угловой маршрутизации. Итак, просто используйте следующий код и напишите маршрут для этого.

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

Для кнопки "Назад" в NavBar

Вставьте следующий код в <ion-toolbar> </ion-toolbar> для кнопки "Назад" на второй странице.

<ion-buttons slot="start">
      <ion-back-button  defaultHref="home"></ion-back-button>
    </ion-buttons>

Ответ 6

первый импорт navcontroller import {NavController, AlertController} из '@ionic/angular'; и теперь идти вперед, также не поддерживает это было лучше всего в ionic 3 this.nav.navigateForward('/ChatPage') поддерживается в ionic 4 для, но мой выбор, следует использовать угловую маршрутизацию

Ответ 7

IONIC 4 - Угловое (имя запуска с ионным запуском --type = угловое)

Меню " Физическая кнопка" и " Назад"

На целевой странице (вторая страница) выполните:

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();
        }
    }

HTML-код SecondPage

<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>

_

PS:

Может понадобиться ссылки меню в HTML:

[routerDirection] = "'forward'"

Как в "app.component.html" по проектам sidemenu

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

См. Дополнительные сведения: https://beta.ionicframework.com/docs/api/buttons/

Ответ 8

Вы можете просто исправить это, используя "import {navController} из 'ionic-angulr'", но это даст вам ошибку с Rxjs. Так что вы можете сделать это...

В вашем app-routing.module.ts убедитесь, что ваши страницы и их модули правильно указаны в path и loadChildren. Вот мой

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' },
];

В моем login.page.html я использовал это, чтобы перейти к registerPage

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

Ответ 9

 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)
        })
    })