ionic 5 使用 "ion-nav" 导航到带后退按钮的简单页面
ionic 5 use "ion-nav" to navigate to simple pages with back button
我是 ionic 的新手,有一个简单的问题,令我惊讶的是,我在任何地方搜索都找不到我的答案。
我想要的是像这样实现简单的页面导航:
https://ionicframework.com/docs/api/nav
手机下面的源代码给出了 javascript 代码,但我想要 angular/ionic 代码。
任何其他文档使用复杂的代码,出于某种原因我无法理解它。
我怎样才能用最简单的代码实现这个目标 IONIC-5/Angular(使用 'ion-nav')?
HTML:
这是我到目前为止所做的:
<ion-nav root="rootPage">
<ion-header translucent>
<ion-toolbar>
<ion-title>Nav</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-list *ngFor="let page of techs">
<ion-item button (click)="showDetail(page)">
<ion-label>
<h3>{{page.title}}</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-nav>
TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.page.html',
styleUrls: ['./list.page.scss'],
})
export class ListPage implements OnInit {
constructor() { }
ngOnInit() {
}
rootPage:any;
techs = [
{
'title': 'Angular',
'icon': 'angular',
'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
'color': '#E63135'
},
{
'title': 'CSS3',
'icon': 'css3',
'description': 'The latest version of cascading stylesheets - the styling language of the web!',
'color': '#0CA9EA'
},
{
'title': 'HTML5',
'icon': 'html5',
'description': 'The latest version of the web\'s markup language.',
'color': '#F46529'
},
{
'title': 'JavaScript',
'icon': 'javascript',
'description': 'One of the most popular programming languages on the Web!',
'color': '#FFD439'
},
{
'title': 'Sass',
'icon': 'sass',
'description': 'Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension.',
'color': '#CE6296'
},
{
'title': 'NodeJS',
'icon': 'nodejs',
'description': 'An open-source, cross-platform runtime environment for developing server-side Web applications.',
'color': '#78BD43'
},
{
'title': 'Python',
'icon': 'python',
'description': 'A clear and powerful object-oriented programming language!',
'color': '#3575AC'
},
{
'title': 'Markdown',
'icon': 'markdown',
'description': 'A super simple way to add formatting like headers, bold, bulleted lists, and so on to plain text.',
'color': '#412159'
},
{
'title': 'Tux',
'icon': 'tux',
'description': 'The official mascot of the Linux kernel!',
'color': '#000'
},
];
showDetail(page:any){
const tech = techs.find(tech => tech.title === title);
nav.push('nav-detail', { tech });
}
}
P.S: nav.push('nav-detail', { tech });
报错(我不知道这里的 nav 是什么)
就像在the docs中解释的那样ion-nav
实际上是在一些非常具体的场景中使用。
Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
和
Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
因此,如果您使用 Angular,大多数时候您可以只使用 NavController
,它在幕后使用 Angular 路由器。
请看这个Stackblitz demo.
您可以看到一个非常简单的页面示例,其中显示了项目列表,单击每个项目都会打开“详细信息”页面:
查看该演示项目时,请注意 app-routing.module.ts
文件(其中定义了主页和详细信息模块的路由)以及数据从 HomePage
到 DetailsPage
.
// app-routing.module.ts file
// ...
const routes: Routes = [
{
path: "home",
loadChildren: () =>
import("./pages/home/home.module").then(m => m.HomePageModule)
},
{
path: "details/:id",
loadChildren: () =>
import("./pages/details/details.module").then(m => m.DetailsPageModule)
},
{
path: "",
redirectTo: "/home",
pathMatch: "full"
}
];
// ...
// home.apge.ts file
// ...
public openItem(itemId: number): void {
this.navCtrl.navigateForward(["details", itemId]);
}
// ...
// details.page.ts file
// ...
ngOnInit() {
// "id" is the name of the parameter in the
// app-routing.module.ts file:
// ==> path: "details/:id",
const itemId = +this.route.snapshot.params.id;
this.item = this.itemsService.getItem(itemId);
}
// ...
我绝对建议您看一下 Angular Router docs and the Ionic - Angular Navigation docs 以便更熟悉 Ionic 5 中使用的路由系统。
我是 ionic 的新手,有一个简单的问题,令我惊讶的是,我在任何地方搜索都找不到我的答案。
我想要的是像这样实现简单的页面导航: https://ionicframework.com/docs/api/nav
手机下面的源代码给出了 javascript 代码,但我想要 angular/ionic 代码。
任何其他文档使用复杂的代码,出于某种原因我无法理解它。
我怎样才能用最简单的代码实现这个目标 IONIC-5/Angular(使用 'ion-nav')?
HTML:
这是我到目前为止所做的:
<ion-nav root="rootPage">
<ion-header translucent>
<ion-toolbar>
<ion-title>Nav</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-list *ngFor="let page of techs">
<ion-item button (click)="showDetail(page)">
<ion-label>
<h3>{{page.title}}</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-nav>
TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.page.html',
styleUrls: ['./list.page.scss'],
})
export class ListPage implements OnInit {
constructor() { }
ngOnInit() {
}
rootPage:any;
techs = [
{
'title': 'Angular',
'icon': 'angular',
'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
'color': '#E63135'
},
{
'title': 'CSS3',
'icon': 'css3',
'description': 'The latest version of cascading stylesheets - the styling language of the web!',
'color': '#0CA9EA'
},
{
'title': 'HTML5',
'icon': 'html5',
'description': 'The latest version of the web\'s markup language.',
'color': '#F46529'
},
{
'title': 'JavaScript',
'icon': 'javascript',
'description': 'One of the most popular programming languages on the Web!',
'color': '#FFD439'
},
{
'title': 'Sass',
'icon': 'sass',
'description': 'Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension.',
'color': '#CE6296'
},
{
'title': 'NodeJS',
'icon': 'nodejs',
'description': 'An open-source, cross-platform runtime environment for developing server-side Web applications.',
'color': '#78BD43'
},
{
'title': 'Python',
'icon': 'python',
'description': 'A clear and powerful object-oriented programming language!',
'color': '#3575AC'
},
{
'title': 'Markdown',
'icon': 'markdown',
'description': 'A super simple way to add formatting like headers, bold, bulleted lists, and so on to plain text.',
'color': '#412159'
},
{
'title': 'Tux',
'icon': 'tux',
'description': 'The official mascot of the Linux kernel!',
'color': '#000'
},
];
showDetail(page:any){
const tech = techs.find(tech => tech.title === title);
nav.push('nav-detail', { tech });
}
}
P.S: nav.push('nav-detail', { tech });
报错(我不知道这里的 nav 是什么)
就像在the docs中解释的那样ion-nav
实际上是在一些非常具体的场景中使用。
Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
和
Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
因此,如果您使用 Angular,大多数时候您可以只使用 NavController
,它在幕后使用 Angular 路由器。
请看这个Stackblitz demo.
您可以看到一个非常简单的页面示例,其中显示了项目列表,单击每个项目都会打开“详细信息”页面:
查看该演示项目时,请注意 app-routing.module.ts
文件(其中定义了主页和详细信息模块的路由)以及数据从 HomePage
到 DetailsPage
.
// app-routing.module.ts file
// ...
const routes: Routes = [
{
path: "home",
loadChildren: () =>
import("./pages/home/home.module").then(m => m.HomePageModule)
},
{
path: "details/:id",
loadChildren: () =>
import("./pages/details/details.module").then(m => m.DetailsPageModule)
},
{
path: "",
redirectTo: "/home",
pathMatch: "full"
}
];
// ...
// home.apge.ts file
// ...
public openItem(itemId: number): void {
this.navCtrl.navigateForward(["details", itemId]);
}
// ...
// details.page.ts file
// ...
ngOnInit() {
// "id" is the name of the parameter in the
// app-routing.module.ts file:
// ==> path: "details/:id",
const itemId = +this.route.snapshot.params.id;
this.item = this.itemsService.getItem(itemId);
}
// ...
我绝对建议您看一下 Angular Router docs and the Ionic - Angular Navigation docs 以便更熟悉 Ionic 5 中使用的路由系统。