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，它将你注入你的组件和app.component中，或者直接注入你的slider.component（如果它不是第三方）。滑块服务可能有一个你使用的公共eventemitter或一个rxjs主题。这样，您就可以从另一个组件中通知组件。

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

2 个答案: