2

我想将一个小原型从带有 Angular 1.4.7 的 Ionic 1.1.1迁移到带有 Angular 2.0.0-beta.1 的 Ionic 2。在我当前的原型中，我使用ui-router带有抽象状态和嵌套视图的 Angular。

这是视图mystate.html：

...
<ion-content scroll="false" class="mainPage">
    <div class="row">
        <div class="col col-33">
            <ion-nav-view name="left"></ion-nav-view>
        </div>      
        <div class="col col-67">
            <ion-nav-view name="right"></ion-nav-view>
        </div>
    </div>
</ion-content>
...

以下是定义的状态：

...
.state('mystate', {
    abstract: true,
    templateUrl: 'app/ordering/views/mystate.html',
    url:'/ordering'
})
.state('mystate.home', {
    cache: false,
    url:'/home',
    views: {
        'left': {
            templateUrl: 'app/mystate/views/leftviewHome.html'
        },
        'right': {
            templateUrl: 'app/mystate/views/rightviewHome.html'
        }
    }
})
.state('mystate.leftA', {
    url:'/leftA',
    views: {
        'left': {
            templateUrl: 'app/mystate/views/leftViewA.html'
        }
    }
})
.state('mystate.rightA', {
    url:'/rightA,
    views: {
        'right': {
            templateUrl: 'app/mystate/views/rightViewA.html'
        }
    }
})
...

Angularui-router允许以下操作：

  • 一次加载两个不同的模板（例如mystate.home）。
  • 彼此独立地加载嵌套视图（例如mystate.leftA和 mystate.rightA）。

所以我不知道如何使用 Angular2 路由器来实现这一点。有人可以给我一个例子或提示如何进行。

4

1 回答 1

1

ionic2 可以做到这一点，但它不需要您使用 angular2 的路由器，该路由器仍在大力开发中。

本质上，它就像添加两个ion-nav组件并设置它们的根一样简单。

<ion-content class="home">
  <ion-card style="height: 200px;">
    <ion-card-content>
      <ion-nav [root]="detail1"></ion-nav>
    </ion-card-content>
  </ion-card>

  <ion-card style="height: 200px;">
    <ion-card-content>
      <ion-nav [root]="detail2"></ion-nav>
    </ion-card-content>
  </ion-card>

</ion-content>

并在您的主要组件 ts 文件中。

import {Page} from 'ionic-framework/ionic';
import {Detail1Page} from '../detail-1/detail-1';
import {Detail2Page} from '../detail-2/detail-2';
@Page({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
  detail1 = Detail1Page;
  detail2 = Detail2Page;
  constructor() { }
}
于 2016-01-24T20:13:37.173 回答