web-dev-qa-db-ja.com

NavControllerはIonic 4で機能しません

ページをプッシュしたいので、コンストラクタにNavControllerを注入しています。ただし、以下のコードはIonic 4では機能しません。Ionic 3ではまったく問題ありませんでした。

コンストラクタ

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

方法

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

Error

angularionic-frameworkhybrid-mobile-appmobile-applicationionic4
22
Abhijit M. Abhi

最後のステップを完了して、これらのルートを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' }
];

hTMLページのsetRoot

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

37
Sáng Trần Công

IONICで廃止されたNavController 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}]）'）;

例：Pagesディレクトリを使用。

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

例：Pagesディレクトリとパラメーターなし。

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

このリンクはタブに役立ちます。詳細については、このリンクをご覧ください。 [ https://medium.com/modus-create-front-end-development/upgrading-an-ionic-3-application-to-ionic-4-eaf81a53cdea] [1]

その他：

新しいページに移動した後、現在のページコンストラクター内でprivate route: ActivatedRouteをインポートすることにより、this.route.snapshot.paramMap.get('locs')を使用してlocsIdを取得できます。

例：

export class ListPage implements OnInit {

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

  ngOnInit() {
  }

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

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

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

詳細はここをクリックしてください

4
Edward Daniel Vidal Garcia

最初にimport navcontroller import {NavController、AlertController} from '@ ionic/angular';そして今後もサポートしませんionic 3で最高でしたthis.nav .navigateForward（ '/ ChatPage'） ionic 4でサポートされていますが、私の推測ではangularルーティングを使用する必要があります

2
wagi malick
this.navCtrl.Push(list);

Ionic 4では機能しません。Ionic 4はAngularルーティングに基づいています。したがって、次のコードを使用して、このためのルートを記述します。

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

NavBarの戻るボタンの場合

2ページ目の[戻る]ボタンの<ion-toolbar> </ion-toolbar>に次のコードを貼り付けます。

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

IONIC 4-Angular（イオン開始appName --type = angular）

物理的戻るボタンおよび戻るボタンメニュー

[ターゲット]ページ（2ページ目）で、次の操作を行います。

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>

_

追伸：

HTMLのメニューリンクに必要な場合があります。

[routerDirection] = "'forward'"

プロジェクトの「app.component.html」のようにsidemenu

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

詳細： https://beta.ionicframework.com/docs/api/buttons/

1
Cesar Devesa

「import {navController} from 'ionic-angulr'」を使用することでこれを修正できますが、Rxjsでエラーが発生します。あなたはこれをやりたいかもしれません...

App-routing.module.tsで、ページとモジュールがパスと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>
1
Dart Vadar

試してみて（in ionic 4）

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

代わりに（in ionic）

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