Question

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

这里是视图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'
        }
    }
})
...

Angular ui-router允许以下内容：

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

所以我不知道如何使用Angular2路由器实现这一目标。有人可以给我一个例子或提示如何继续。

Answer 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() { }
}

角度2

1 个答案: