Ionic 3 Angular：如何在其他页面中访问ViewChild

Question

我创建了一个标准的导航菜单。我的 home.html 页面有一个滑块组件。这个滑块组件可以通过调用 goToSlide() 方法来进行导航。

@ViewChild(Slides) slides: Slides;

作为侧边导航菜单已经通过app.component.ts实现并可以访问，那么我如何访问在home.ts中定义的幻灯片组件呢？

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

}

app.components.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);
  }
}

- Vik

---

你能展示更多关于home.ts和home.html的代码吗？ - Sampath

请查看此处：https://stackoverflow.com/a/45710245/1791913 - FAISAL

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

- sebaferreras

---

使用上述逻辑后，我得到了以下错误： ERROR TypeError: 无法读取未定义的 'slideTo' 属性 at app.component.ts:25 at events.js:106 at Array.forEach (<anonymous>) at Events.publish (events.js:105) at MyApp.webpackJsonp.262.MyApp.changeCurrentSlide (app.component.ts:35) at MyApp.webpackJsonp.262.MyApp.goToSlide (app.component.ts:31) at Object.eval [as handleEvent] (MyApp.html:11) at handleEvent (core.es5.js:11914) at callWithDebugContext (core.es5.js:13206) at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794) - Vik

嗯，看起来事件在幻灯片加载之前被触发了。我在订阅事件时添加了一个空值检查。你是在home.ts加载之前发布事件吗？ - sebaferreras

Answer 2

您可以在该页面上插入一个滑块组件吗？

如果您希望滑块组件仅在应用程序组件中定义，您可以：

1. 在home.ts中发出事件，然后在app.component中进行监听。

2. 创建一个slider.service.ts，在he组件和app.component或直接在slider.component（如果它不是第三方）中注入。滑块服务可以有一个公共的eventemitter或rxjs主题。这样，您就可以从另一个组件内部通知组件。

- S. Robijns