ionic 2 sidemenu - コンポーネント内のnavCtrl

Question

私はsidemenuでイオン2スターターテンプレートを使用しています。

だから、元app.htmlこの

<ion-menu [content]="content"> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 

    <ion-content> 
     <ion-list> 
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
       {{p.title}} 
      </button> 
     </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

のように見え、私はこの

<ion-menu [content]="content"> 
    <st-menu></st-menu> 
</ion-menu> 

私menu.component.tsのようなコンポーネントでメニュー内容を置換するには、次のようになり、基本的に元のapp.tsファイルからコピーされています

import {Page1} from "../pages/page1/page1"; 
import {Page2} from "../pages/page2/page2"; 
import {Nav, NavController} from "ionic-angular"; 

@Component({ 
    selector: 'st-menu', 
    templateUrl: 'build/menu/menu.html' 
}) 

export class MenuCmp { 
    @ViewChild(Nav) nav: Nav; 

    pages: Array<{title: string, component: any}>; 

    constructor(private navCtrl:NavController) { 
     this.pages = [ 
      { title: 'Home', component: HomePage }, 
      { title: 'Page uno', component: Page1 }, 
      { title: 'Page dos', component: Page2 } 
     ]; 
    } 
    openPage(page) { 
     this.nav.setRoot(page.component); 
    } 

} 

このようなmenu.html

今

<ion-toolbar> 
    <ion-title>Menu</ion-title> 
</ion-toolbar> 

<ion-list> 
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
    </button> 
</ion-list> 

私はエラーを取得してきたメニュー内をクリックします：

は、プロパティを読み取ることができません「setRoot」私は this.navを交換することによりテストしてみた未定義

の。 this.nav.setRoot（HomePage）でsetRoot（page.component）; と同じです。私はnavCtrl（提供及び注入された）でNAVを交換するとき それは this.navCtrl.setRootが

任意の提案機能ではないと言いますか？ありがとう！

Answer 1

あなたは、イオンドキュメントからopenPage機能、 に親コンポーネントのnavCtrlを渡して試してみてください：

Injecting NavController will always get you an instance of the nearest NavController, regardless of whether it is a Tab or a Nav.

Behind the scenes, when Ionic instantiates a new NavController, it creates an injector with NavController bound to that instance (usually either a Nav or Tab) and adds the injector to its own providers. For more information on providers and dependency injection, see Providers and DI.

彼らはまた言う：

What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav, you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController):

あなたはnavCtrlする必要はありません注入するが、menu.tsにある：

@ViewChild(Nav) nav: Nav; 

しかし、あなたはviとしてイオンナビを持っていないewChild at menu.html app.tsのnavCtrlを入力としてコンポーネントに渡すか、またはmenu.htmlでion-navをラップする方法を見つけることができます。また、アプリケーションでopenPage関数を宣言することもできます.tsレベルを入力としてコンポーネントに渡します（ただし、このスコープを保持する関数を宣言するときは矢印の表記を使用してください）