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 ORIGINAL EXCEPTION: TypeError: Cannot read property 'close' of undefined

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

Ionic 2: How to use ViewChild instead of app.getComponent

typescript

ionic-framework

ionic2

ionic3

angular