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.
