Question

我将我的离子2应用程序迁移到RC版本，其中删除了app.getComponent。在他们的github发行说明中，他们说使用ViewChild，我该如何正确使用它？

之前（在RC版本之前工作）：

openPage(page) {
  this.app.getComponent('leftMenu').close();   
  // navigate to the new page if it is not the current page
  let nav = this.app.getComponent('nav');
  nav.setRoot(page.component);  
}

后：

@Component({
  templateUrl: 'build/app.html',
  queries: {
   leftMenu: new ViewChild('leftMenu'),
   nav: new ViewChild('content')
  }
})

....

openPage(page) {
    // close the menu when clicking a link from the menu
    this.leftmenu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
 }

我试图让'leftMenu＆＃39;组件没有任何成功。我得到的错误是

browser_adapter.js：77 ORIGINAL EXCEPTION：TypeError：无法读取财产＆＃39;关闭＆＃39;未定义的

Answer 1

按照它在Conference App中完成的方式（并稍微更改一下以简化代码）：

import {Component, ViewChild} from '@angular/core';
import {ionicBootstrap, ..., Platform, MenuController} from 'ionic-angular';
...

@Component({
  templateUrl: 'build/app.html',
  queries: {
    nav: new ViewChild('content')
  }
})
class ConferenceApp {
  static get parameters() {
    return [[...], [Platform], [MenuController]]
  }

  constructor(..., platform, menu) {
    this.menu = menu;

    // Call any initial plugins when ready
    platform.ready().then(() => {
       ...
    });

 openPage(page) {
     this.menu.close();
     this.nav.setRoot(page);    
  }
}

ionicBootstrap(ConferenceApp, [...], {
  // config
});

据我所知，您可以使用 MenuController 的实例来执行close()方法并隐藏侧边菜单。

如果您需要此代码的TypeScript版本，只需添加评论，我就会更新答案，并不想添加答案以保持答案简短。

Ionic 2：如何使用ViewChild而不是app.getComponent

1 个答案: