离子路径路由(如Angular 2中的RouterModule)

Question

(前言:我来自C#/ WPF背景,一般来说是网络开发的新手 - 请耐心等待!)

使用Angular 2,我能够像这样定义我的路线:

    RouterModule.forChild([
        { path: 'contacts', component: ContactsComponent }
    ])

然后,在一些html中,我可以使用routerLink语法来引用它:

routerLink='/contacts'

这很好用,最终它允许我用绑定替换字符串,所以我可以在运行时获取路径,允许数据确定导航结构.

现在,我试图在Ionic 2中做类似的事情,但如果有可能,那对我来说并不明显.我已经看到你如何使用[navPush]使用深层链接绑定到页面(就像这个人做的那样:http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr？p = preview ),但是这需要提前定义页面在想要使用它的组件中的时间.

Ionic的导航结构是否支持此功能？

Answer 1

经过大量的挖掘,我发现了我做错了什么.以下是使用Ionic v2深层链接指向路径的方法:

在app.module.ts导入中添加:

IonicModule.forRoot(MyApp, {}, {
  links: [
    { component: ContactsPage, name: 'ContactPageName', segment: 'contacts' }
  ]

确保还将ContactsPage添加到声明和entryComponents中.

然后,在启动导航的页面的html中,您可以以声明方式使用它,就像这样

navPush="ContactPageName"

请注意,您使用的是直接链接的名称!

在我的例子中,我从json文件中获取了一个项目列表,因此像这样循环遍历它们:

 <ion-item *ngFor="let contact of contacts" detail-push>
      <button ion-button navPush="{{contact.link}}">Go</button>
 </ion-item>

我的json文件包含:

    "link": "ContactPageName"

希望能帮助别人!