角度 2 中的抽象状态和多个视图答案

【问题标题】：abstract states and multiple views in angular 2角度 2 中的抽象状态和多个视图
【发布时间】：2016-04-30 05:26:36
【问题描述】：

我想将一个小原型从带有 Angular 1.4.7 的 Ionic 1.1.1 迁移到带有 Angular 2.0.0-beta.1 的 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 路由器来实现这一点。有人可以给我一个例子或提示如何继续。

【问题讨论】：

标签： ionic-framework angular-ui-router angular router ionic2

【解决方案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() { }
}

【讨论】：