typescript - ionic 3 angular accessing viewchild into other pages -

i created standard nav menu. home.html has slider component. slider component can navigated using few links invoke gotoslide() method exposed using

@viewchild(slides) slides: slides; 

as side navigator menu implemented , accessible via app.component.ts how access slides component defined in home.ts ?

hime.html

<ion-header>   <ion-navbar no-padding>      <button ion-button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>     <ion-title style="background-color:#2298d3">       <ion-row><ion-col text-left>       <img (click)="gotoslide(0)" src="assets/images/white_logo_color_background.jpg" width="20%" />       </ion-col>       <ion-col text-right>        <button ion-button clear (click)="gotoslide(1)" style="color:white">services</button>        <button ion-button clear (click)="gotoslide(2)" style="color:white">contact us</button>       </ion-col>       </ion-row>     </ion-title>   </ion-navbar> </ion-header>  <ion-content no-padding>  <ion-slides direction="horizontal" speed="1000" slidesperview="1" pager="true">   <ion-slide  class="home-intro" style="background-color:#2298d3;max-height:440px">   </ion-slide>    <ion-slide padding class="site-slide" >      <ion-row>      <ion-row>   </ion-slide> </ion-slides> </ion-content> 

home.ts

import { component } '@angular/core'; import { navcontroller, slides } 'ionic-angular'; import { viewchild } '@angular/core'; import { formbuilder, formgroup, validators } '@angular/forms';  import { sendenquiryservice } '../../providers/send-enquiry.service'  @component({   selector: 'page-home',   templateurl: 'home.html' }) export class homepage {    @viewchild(slides) slides: slides;    slidetwoform: formgroup;   constructor(public navctrl: navcontroller,               public formbuilder: formbuilder,               public enquiryservice:sendenquiryservice) {   }    gotoslide(num){     this.slides.slideto(num, 500);   } 

}

app.components.ts:

import { component, viewchild } '@angular/core'; import { nav, platform, slides, events } 'ionic-angular'; import { statusbar } '@ionic-native/status-bar'; import { splashscreen } '@ionic-native/splash-screen';  import { homepage } '../pages/home/home'; @component({   templateurl: 'app.html' }) export class myapp {    rootpage:any = homepage;    @viewchild(nav) nav: nav;    constructor(platform: platform,                statusbar: statusbar,                splashscreen: splashscreen,               public events: events) {     platform.ready().then(() => {       // okay, platform ready , our plugins available.       // here can higher level native things might need.       statusbar.styledefault();       splashscreen.hide();       this.nav.setroot(homepage);     });   }    gotoslide(index){     this.changecurrentslide(index);   }    changecurrentslide(index) {     this.events.publish('slider:slideto', index);   } } 

you can use events. in home.ts file subscribe event change current slide:

import { events } 'ionic-angular';  @viewchild(slides) slides: slides;  constructor(public events: events) {   events.subscribe('slider:slideto', (index) => {     if(this.slides) {       this.slides.slideto(index, 500);     } else {       console.log('tried modify slides not loaded yet');     }   }); } 

and in app.component.ts file, publish event when needed:

import { events } 'ionic-angular';  constructor(public events: events) {}  changecurrentslide(index) {   this.events.publish('slider:slideto', index); }