angular - ionic 5 使用 "ion-nav"导航到带后退按钮的简单页面

Question

我是 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 是什么)

Answer 1

就像在 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 Router。

请看这个 Stackblitz demo .

您可以看到一个非常简单的页面示例，该页面显示了项目列表，单击每个项目会打开“详细信息”页面:

在查看该演示项目时，请注意 app-routing.module.ts 文件(其中定义了 home 和 details 模块的路由)以及数据的方式从 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 和 Ionic - Angular Navigation docs 为了更加熟悉 Ionic 5 中使用的路由系统。