离子 3 角度访问 viewchild 到其他页面

Question

我创建了一个标准导航菜单。我的home.html 有一个滑块组件。可以使用几个链接来导航此滑块组件，这些链接调用使用

公开的 goToSlide() 方法

@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>

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

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

Answer 2

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

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

1.：在 home.ts 中发出一个事件，该事件将在 app.component 中被监听。

2.：制作一个slider.service.ts，您将其注入您的he组件和app.component或直接注入您的slider.component（如果它不是第三方）。滑块服务可以有一个你会使用的公共事件发射器或一个 rxjs 主题。这样您就可以从另一个组件中通知一个组件。