Onsen UI 2.0スプリッタとプッシュページが一緒に機能しない

Question

オプションを変更したり、設定を変更するメニューがあるメインタブ（tab1.html）を作成しました...今、メインのボタンをクリックすることができますタブ（tab1.html）を別のオナー（tab4.html）に移動します。問題は、メニュー（スプリッタ）とプッシュページ機能の両方で一緒に使えないということです。メニューのスプリッタ：

<ons-splitter> 
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
<ons-page> 
    <ons-list> 
    <ons-list-item onclick="fn.load('tab1.html')" tappable> 
     <ons-icon icon="home" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Startseite</p> 
    </ons-list-item> 
    <ons-list-item onclick="fn.load('tab6.html')" tappable> 
     <ons-icon icon="user" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Mein Profil</p> 
    </ons-list-item> 
    <ons-list-item onclick="fn.load('tab8.html')" tappable> 
     <ons-icon icon="sliders" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Einstellungen</p> 
    </ons-list-item> 
    </ons-list> 
</ons-page> 
</ons-splitter-side> 
<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content> 
</ons-splitter> 

そして、あなたは4ページに来るべきナビゲーター：

<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator> 

その後tab1.html：

<ons-template id="tab1.html"> 
<ons-page> 
<div class="left"> <!--left--> 
    <ons-toolbar-button onclick="fn.open()"> 
    <ons-icon icon="md-menu"></ons-icon> 
    </ons-toolbar-button> 
</div> 
<button onclick="change()" /> 
</ons-page> 

そしてtab4.htmlあなたがすべきtab1.htmlから来る：

<ons-template id="tab4.html"> 
<ons-page> 
<ons-toolbar> 
    <div class="left"><ons-back-button>Back</ons-back-button></div> 
    <div class="center">Uhrzeitenansicht</div> 
</ons-toolbar> 
</ons-page> 
</ons-template> 

最終あなたがスプリッタの前に 'ons-navigator'タグを設定した場合、スプリッタは動作しません。それを設定した後で、myNavigatorがnullまたはpushPageがすでに実行されているなどのエラーが発生した場合。

Answer 1

2つの要素（スプリッタとナビゲータ）の入れ子に何らかの問題があるように見えます。どちらも実際のページのコンテナとして機能するはずです。したがって、両方を使いたい場合は、一方を他方の内側に配置する必要があります。

<ons-navigator id="pushpage_navigator"> 
    <ons-page> 
    <ons-splitter> 
     <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
     <ons-page> 
      <ons-list> 
      <ons-list-item onclick="fn.load('tab1.html')" tappable>1</ons-list-item> 
      <ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item> 
      <ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item> 
      </ons-list> 
     </ons-page> 
     </ons-splitter-side> 
     <ons-splitter-content id="content" page="tab1.html"></ons-splitter-content> 
    </ons-splitter> 
    </ons-page> 
</ons-navigator> 

あなたが最初からスプリッタとナビゲーターの両方にアクセスできるようになりますこの方法：あなたが何かを持っている場合は

。 Demo。

もし私があなたに何らかの誤解を与えた場合や、さらなる問題がある場合は、自由にコメントしてください。