angular 2 中的抽象状态和多个视图

Question

我想将一个小原型从 Ionic 1.1.1 和 Angular 1.4.7 迁移到 Ionic 2 Angular 2.0.0-beta.1。在我当前的原型中，我将 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() { }
}

angular 2 中的抽象状态和多个视图

abstract states and multiple views in angular 2

router

angular-ui-router

ionic-framework

ionic2

angular