abstract states and multiple views in angular 2 - ionic-framework

Question

I'd like to migrate a little prototype from Ionic 1.1.1 with Angular 1.4.7 to Ionic 2 with Angular 2.0.0-beta.1. In my current prototype I use the Angular ui-router with abstract states and nested views.
Here's the view 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>
...
Here are the defined states:
...
.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'
}
}
})
...
The Angular ui-router allows the following:
Load two different templates at once (e.g. mystate.home).
Load nested views independently from each other (e.g mystate.leftA and mystate.rightA).
So I have no clue how to achieve this with the Angular2 router. Can someone give me an example or a hint on how to proceed.

Answer 1

This is possible with ionic2 but it doesn't require you to use angular2's router, which is still under heavy development.
Essentially, it's as easy as adding two ion-nav components and setting their roots.
<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>
And in your main components ts file.
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() { }
}