2

我对 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 });
  }
}

PS：nav.push('nav-detail', { tech }); 给出错误（我不知道这里的导航是什么）

4

1 回答 1

3

就像在文档中解释的那样，ion-nav实际上在一些非常具体的场景中使用。

Nav 是一个独立的组件，用于加载任意组件并将新组件推入堆栈。

和

与Router Outlet 不同，Nav 不绑定到特定的路由器。这意味着如果我们加载一个 Nav 组件，并将其他组件推送到堆栈中，它们不会影响应用程序的整体路由器。这适合您可以拥有一个模式的用例，它需要自己的子导航，而不会将其绑定到应用程序 URL。

因此，如果您使用的是 Angular，大多数时候您可以只使用NavController其中，在幕后使用 Angular 路由器。

请看一下这个Stackblitz 演示。

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

演示

在查看该演示项目时，请注意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 文档和Ionic - Angular Navigation 文档，以便更熟悉 Ionic 5 中使用的路由系统。

于 2020-12-04T10:20:03.133 回答