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では次のことが可能です。

  • 2 つの異なるテンプレートを同時にロードします (例: mystate.home)。
  • ネストされたビューを互いに独立してロードします (例:mystate.leftAと mystate.rightA)。

したがって、Angular2 ルーターでこれを実現する方法がわかりません。誰かが私に例や進め方のヒントを教えてくれますか?

4

1 に答える 1

1

これは ionic2 で可能ですが、Angular2 のルーターを使用する必要はありません。これはまだ開発中です。

ion-nav基本的に、2 つのコンポーネントを追加してそれらのルートを設定するのと同じくらい簡単です。

<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 に答える