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

Question

我正在将我的 ionic 2 应用程序迁移到删除 app.getComponent 的 RC 版本。在他们的 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”组件但没有任何成功。我得到的错误是

browser_adapter.js:77 原始异常：TypeError：无法读取未定义的属性“关闭”

Answer 1

遵循它在会议应用程序中的完成方式（并稍微更改它以简化代码）：

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()方法并隐藏侧边菜单。

If you need the TypeScript version of this code, just add a comment and I'll update the answer, didn't want to add it to keep the answer short.