IONIC 2 BETA / Angular 2 - 应用指令尚未定义导航

Question

我遇到了一个问题，当我在主 app.html 中使用指令时，我的应用程序导航尚未定义，当我尝试在指令的类中注入 ionic-angular 的 NavController 或 NavParams 服务时，我收到错误“没有 NavController 的提供者”或“没有 NavParams 的提供者”。

我的猜测是在我的指令类初始化之后设置导航。我尝试使用 @ViewChild 或 app.getActiveNav()，但它们都返回 NULL。

有人可以向我解释在应用指令上注入 Nav 的正确方法吗？

app.ts:

import {Component, Inject, ViewChild} from '@angular/core';
import {NavController, Nav, Loading, Platform, ionicBootstrap, Modal} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {LoginPage} from './pages/login/login';
import {HomePage} from './pages/home/home';
import {ContactTabPage} from './pages/contact/tabs/tab';
import {WorkspaceTabPage} from './pages/workspace/list/tabs/tab';
import {UserService} from './providers/user-service/user-service';
import {Http} from '@angular/http';
import {Global} from './global';
import {ChatContactsPage} from './pages/chat/contacts/chat-contacts';
import {PushdService} from './providers/pushd-service/pushd-service';
import {Events} from 'ionic-angular';

@Component({
  templateUrl: 'build/app.html',
  directives: [ChatContactsPage],
  queries: {
    nav: new ViewChild('content')
  }
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  currentUser: any;
  rootPage: any = LoginPage;
  contact: any = ContactTabPage;
  home: any = HomePage;
  workspace: any = WorkspaceTabPage;
  userService: any;
  pushdService: any;
  global: any;

  constructor(platform: Platform, http:Http, events:Events) {
    this.global = Global;
    this.userService = new UserService(http);

    let callback = (data) => {
      this.rootPage = HomePage;
      this.global.currentUser = data;
      this.pushdService = new PushdService(http, events);
    };

    this.userService.verifyLoginUser(callback);

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
      this.rootPage = page;
  }

  logout(){
      let loading = Loading.create({
       content: 'Aguardando...'
     });
     this.nav.present(loading);
      let callback = (data) => {
        this.rootPage = LoginPage;
        loading.dismiss();
      }
      this.userService.logout(callback);
  }

}

ionicBootstrap(MyApp);

app.html

<ion-menu [content]="conteudo" side="left">
  <ion-content>
    <ion-list class="menu-init">
      <ion-item primary class="back-user">
        <div class="logo-user">
          <img src="{{global.currentUser.image_profile_full_path}}">
          <br>
          <span>
            <strong>{{global.currentUser.display_name}}</strong>
          </span>
        </div>
      </ion-item>
      <button ion-item (click)="openPage(home)" menuClose>  <ion-icon name="home" start></ion-icon> Home</button>
      <button ion-item (click)="openPage(contact)" menuClose> <ion-icon name="people" start></ion-icon> Contatos </button>
      <button ion-item (click)="openPage(workspace)" menuClose> <ion-icon name="briefcase" start></ion-icon> Espaços de trabalho </button>
      <button ion-item (click)="logout()" menuClose> <ion-icon name="exit" start></ion-icon> Sair </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="conteudo" side="left">
  <ion-content>
    <ion-list class="menu-init">
      <ion-item primary class="back-user">
        <div class="logo-user">
          <img src="{{global.currentUser.image_profile_full_path}}">
          <br>
          <span>
            <strong>{{global.currentUser.display_name}}</strong>
          </span>
        </div>
      </ion-item>
      <button ion-item (click)="openPage(home)" menuClose>  <ion-icon name="home" start></ion-icon> Home</button>
      <button ion-item (click)="openPage(contact)" menuClose> <ion-icon name="people" start></ion-icon> Contatos </button>
      <button ion-item (click)="openPage(workspace)" menuClose> <ion-icon name="briefcase" start></ion-icon> Espaços de trabalho </button>
      <button ion-item (click)="logout()" menuClose> <ion-icon name="exit" start></ion-icon> Sair </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="chat" side="right">
  <ion-content>
    <chat-contacts></chat-contacts>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #conteudo #chat></ion-nav>

chat-c​​ontact.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {ChatService} from '../../../providers/chat-service/chat-service';
import {NavController, Nav, App, NavParams} from 'ionic-angular';
import {ChatRoomPage} from '../room/chat-room';

@Component({
  selector: 'chat-contacts',
  templateUrl: 'build/pages/chat/contacts/chat-contacts.html',
  queries: {
    nav: new ViewChild('content')
  }
})

export class ChatContactsPage {
  view: any;
  user: any;  
  contactsList: any;
  @ViewChild(Nav) nav: Nav;

  constructor( private app: App) {
    ChatService.callback = (data) => {
      console.log('recebido', data);
      this.contactsList = data;
    };

    ChatService.getContactsList();
  }

  close() {
    this.view.dismiss();
  }

  goToPage (page, pageParams?:Object) {

    if (page == 'chat-room') {
      this.nav.push(ChatRoomPage);
    }
  }
}

chat-c​​ontact.html

<ion-list class="menu-init" *ngIf="contactsList && contactsList.users.length > 0">
    <ion-item (click)="goToPage('chat-room', {co_user: contact.co_user})" primary class="back-user" *ngFor="let contact of contactsList.users">
        <div style="position: relative;">
          <span class="logo-user-sm">
            <img src="{{contact.user_image_full_path}}">
          </span>

          <span style="vertical-align: middle;position: absolute;">
            <strong>{{contact.no_user}}</strong>
          </span>
        </div>
    </ion-item>
</ion-list>

IONIC 版本：2.0.0-beta.37

Answer 1

好的，设法让导航服务在我的 ChatContacts 组件中注入 App 服务，然后我只使用 app.getRootNav() 和 app.getActive().getNavParams()。

我最后的聊天-contacts.ts：

import {Component, ViewChild} from '@angular/core';
import {ChatService, ChatStatuses} from '../../../providers/chat-service/chat-service';
import {App, Loading, Modal, MenuController} from 'ionic-angular';
import {ChatRoomPage} from '../../chat/room/chat-room';

@Component({
  selector: 'chat-contacts',
  templateUrl: 'build/pages/chat/contacts/chat-contacts.html',
  queries: {
    nav: new ViewChild('content')
  }
})

export class ChatContactsPage {
  view: any;
  user: any;  
  contactsList: any;
  app: App;
  menu: MenuController;

  constructor(private myApp: App, public menuCtrl: MenuController) {
    this.app = myApp;
    this.menu = menuCtrl;

    ChatService.callback = (data) => {
      console.log('recebido', data);
      this.contactsList = data;
    };

    ChatService.getContactsList();
  }

  close() {
    this.view.dismiss();
  }

  statusClass (status:string) {
    return {
      'logo-user-sm': true,
      'greenBg': (status == ChatStatuses.available),
      'orangeBg': (status == ChatStatuses.unavailable),
      'redBg': (status == ChatStatuses.offline)
    };
  };

  goToPage (page, pageParams?:Object) {
    let nav = this.app.getRootNav();
    let navParams = nav.getActive().getNavParams();

    let loading:Loading = Loading.create({
      content: 'Carregando conversa...'
    });

    if(pageParams) {
      navParams.data = pageParams;
    }

    if(navParams.data.callback) {
      navParams.data.callback({});
    }

    nav.pop();
    nav.rootNav.pop();

    if (page == 'chat-room') {
      navParams.data.loading = loading;
      this.menu.close();
      nav.present(loading);
      nav.push(ChatRoomPage, navParams.data);
    }
  }
}