我创建了一个标准的导航菜单。我的
作为侧边导航菜单已经通过
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);
}
}
home.ts
和home.html
的代码吗? - Sampath