我正在我的构造函数中注入NavController,因为我想推送一个页面。但是,下面的代码在Ionic 4中不起作用。在Ionic 3中完全没问题。
构造函数
constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
this.menuCtrl.enable(true);
}
方法
goToSecondPage()
{
this.navCtrl.push(list);
}
现在,要完成最后一步并在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/
NavController因此在IONIC 4中已弃用。
结构是这样的。
V3 V4
/src/pages -> /src/app/pages
/src/models -> /src/app/models
/src/providers -> /src/app/providers
示例:使用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]
附加功能:
导航到新页面后,我们可以通过在当前页面构造函数中导入
this.route.snapshot.paramMap.get('locs')
来使用private route: ActivatedRoute
获取locsId
例:
export class ListPage implements OnInit {
constructor(private route: ActivatedRoute) {
console.log("this.route.snapshot.paramMap.get : ", this.route.snapshot.paramMap.get('locs'));
}
ngOnInit() {
}
}
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
...
})
export class LoginComponent {
constructor(private router: Router){}
navigate(){
this.router.navigate(['/detail'])
}
}
this.navCtrl.push(list);
它在Ionic 4中不起作用。离子4基于角度路由。因此,只需使用以下代码,并为此编写路由。
this.navCtrl.goForward('/list');
对于NavBar中的后退按钮
在<ion-toolbar> </ion-toolbar>
中将以下代码粘贴到第2页中的后退按钮。
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
首先从'@ ionic / angular'导入navcontroller import {NavController,AlertController};现在前进也不支持它最好离子3 this.nav.navigateForward('/ ChatPage')支持离子4但我的sugesstion应该使用角度路由
IONIC 4 - Angular(离子启动appName --type = angular)
物理后退按钮和后退按钮菜单
在目标页面(第二页)中,执行:
第二页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:
HTML中的菜单链接可能是必需的:
[routerDirection] = "'forward'"
就像项目sidemenu中的“app.component.html”一样
<ion-item [routerDirection]="'forward'" [routerLink]="[p.url]">
你可以通过使用'ionic-angulr'中的“import {navController}来解决这个问题。”但是这会给你一个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>
试试(离子4)
import { NavController } from '@ionic/angular';
代替(在离子3中)
import { NavController } from 'ionic-angular'
this.deeplink.route({'/ registration /:userid':RegistrationPage,'/ registration':RegistrationPage,})。subscribe((match)=> { this.router.navigateByUrl(匹配。$ link.path,匹配。$ args) console.log(“Deeplink =>”,匹配);
}, err => {
console.log("Deeplink Error=>", err)
alert("Deeplink Error=>" + err)
})
})