Pesquisa de site

angular - Ionic 2: Como usar ViewChild em vez de app.getComponent


Estou migrando meu aplicativo Ionic 2 para a versão RC na qual app.getComponent foi removido. Nos notes de lançamento deles no GitHub, eles mencionaram sobre usar ViewChild, como eu posso usá-lo corretamente?

Antes (trabalhando antes da versão 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);  
}

Depois de :

@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);
 }

Estou tentando obter o componente 'leftMenu' sem sucesso. O erro que recebo é

browser_adapter.js:77 EXCEÇÃO ORIGINAL: TypeError: Não é possível ler a propriedade 'close' de indefinido

Resposta #1

Seguindo como é feito no App da Conferência (e mudando apenas um pouco para simplificar o código):

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
});

Até onde eu sei, você pode usar a instância do MenuController para executar o método close() e ocultar o menu lateral.

Se você precisar da versão TypeScript deste código, é só adicionar um comentário que eu atualizo a resposta, não quis adicioná-la para manter a resposta curta.

Artigos relacionados