angular - ionic 3 Angular 访问 viewchild 到其他页面

Question

我创建了一个标准的导航菜单。我的 home.html 有一个 slider 组件。可以使用调用 goToSlide() 方法的几个链接来导航此 slider 组件，该方法使用

@ViewChild(Slides) slides: Slides;

由于侧面导航器菜单是通过 app.component.ts 实现和访问的，所以我如何访问 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>

首页.ts

import { Component } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { SendEnquiryService } from '../../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);
  }

应用程序组件.ts:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Slides, Events } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../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, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.nav.setRoot(HomePage);
    });
  }

  goToSlide(index){
    this.changeCurrentSlide(index);
  }

  changeCurrentSlide(index) {
    this.events.publish('slider:slideTo', index);
  }
}

Answer 1

您可以使用 Events .在您的 home.ts 文件中订阅一个将更改当前幻灯片的事件:

import { Events } from '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 to modify the slides but they were not loaded yet');
    }
  });
}

在您的 app.component.ts 文件中，只需在需要时发布该事件:

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

changeCurrentSlide(index) {
  this.events.publish('slider:slideTo', index);
}