parametros - viewchild angular 6

¿Cómo puedo acceder a las funciones del componente principal desde una página en la que navegué en Ionic 2?

Question

Creé una aplicación Ionic v2 con el siguiente comando:

ionic start my-app sidemenu --v2 --ts .

Dentro del archivo app.ts , tengo algunas funciones lógicas para hacer algunas cosas (como abrir un modal y mantener el estado de lo que debería mostrar el menú lateral). Cuando se muestra una determinada página (por ejemplo, pages/getting-started/getting-started.ts ), me gustaría volver a utilizar las mismas funciones en app.ts ¿Cómo app.ts a las funciones de las app.ts desde una página a la que se navega?

Mis app.ts parecen a las siguientes.

class MyApp {
 @ViewChild(Nav) nav:Nav;
 private rootPage:any = GettingStartedPage;
 private pages:any;

 constructor(platform:Platform) {
  this.initializeApp();
  this.pages = { 
   ''GettingStartedPage'': GettingStartedPage, 
   ''AnotherPage'': AnotherPage //more pages and modals
  };
 }

 initializeApp() {
  this.platform.ready().then(() => {
   StatusBar.styleDefault();
  });
 }

 openPage(page:string) {
  //when a user clicks on the left menu items, a new page is navigated to
  let component this.pages[page];
  this.nav.setRoot(component);
 }

 openModal(page:string) {
  //modals are opened here, there''s more complicated logic
  //but this serves to demonstrate my problem
  let component = this.pages[page];
  Modal.create(component);
 }
}

ionicBootstrap(MyApp);

My getting-started.ts parece a lo siguiente.

export class GettingStartedPage {
 constructor(
  platform:Platform, 
  viewController:ViewController,
  navController:NavController,
  navParams:NavParams) {
 }

 buttonClicked() {
  //i need to access app.ts openModal here
  //how do i call a method on app.ts?
  //like MyApp.openModal(''SomeModal'');
 }
}

Answer 1

Con un servicio compartido, puede comunicarse a través de toda la aplicación.

Crea una clase de servicio como

@Injectable() 
class SharedService {
  // use any kind of observable to actively notify about new messages
  someEvent:Subject = new Subject(); 
}

Preséntelo en su aplicación

@App({
  ...
  providers: [SharedService]
})

Inyectarlo en el componente de la App y en cualquier componente, directiva o servicio que desee comunicar al componente de la App desde

constructor(private sharedService:SharedService) {}

someEventHandler() {
  this.sharedService.someEvent.next(''some new value'');
}

En el componente de la App , suscríbase a las notificaciones

constructor(sharedService:SharedService) {
  sharedService.someEvent.subscribe(event => {
    if(event == ...) {
      this.doSomething();
    }
  });
}

Para más detalles, consulte https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

Con Ionic 2 puede usar Eventos para la comunicación entre componentes. Por ejemplo, en su buttonClicked() función, buttonClicked() podría disparar un evento

buttonClicked() {
  this.events.publish(''functionCall:buttonClicked'', thisPage);
}

y escúchalo, por ejemplo, en el constructor de tu clase principal para abrir el modal:

this.events.subscribe(''functionCall:buttonClicked'', userEventData => { 
  openModal(userEventData[0]);
});

Incluso puede enviar datos con el evento (aquí: thisPage ).

Answer 3

Alternativamente, puedes ir a cualquiera

Eventos

Events es un sistema de eventos de estilo publicar-suscribir para enviar y responder a eventos de nivel de aplicación en su aplicación.

o EventEmitter

EventEmitter es una abstracción angular2 y su único propósito es emitir eventos en componentes.

Answer 4

en el archivo TS del componente de página:

import { MyApp } from ''../../app/app.component'';

constructor(public AppComponent: MyApp) {
  }

luego dentro de la página donde quiera acceder a esa función:

this.AppComponent.functionName();