Question

我正在尝试使用幻灯片更改导航栏标题。在浏览下一张幻灯片时，我该如何实现？我试过了：

onSlideChangeStart(slider) {
this.app.setTitle('title1');
}

但它只是在浏览器中设置标题，而不是在ion-title标签中。我想根据显示的幻灯片设置标题。

这是我的代码：

<ion-header>
<ion-navbar color="navh" no-border-bottom>
<ion-title>title</ion-title>
</ion-navbar>
</ion-header>
<ion-content  no-bounce >
<ion-slides [options]="mySlideOptions (ionWillChange)="onSlideChangeStart($event)">

<ion-slide>
     <img #title1 src="assets/img/1.png" >
</ion-slide>
<ion-slide>
     <img #title2 src="assets/img/2.png" >
</ion-slide>
<ion-slide>
     <img #title3 src="assets/img/3.png" >
</ion-slide>
</ion-slides>
</ion-content>

Answer 1

使用变量设置标题怎么样？

import { ViewChild } from '@angular/core';

@Component({
  templateUrl:"home.html"
})
export class YourAwesomePage {
  @ViewChild('mySlider') slider: Slides;

  public title: string;
  // ...

  constructor() {
    this.title = 'Initial title';
    // ...
  }

  onSlideChangeStart(slide) {
    // You can use the slide parameter to get info from it or just use the slider reference to know the index of the active slide
    let currentIndex = this.slider.getActiveIndex();
    this.title = "Slider " + currentIndex;
  }
}

然后在你看来：

<ion-header>
  <ion-navbar color="navh" no-border-bottom>
    <ion-title>{{ title }}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-bounce >
  <ion-slides #mySlider [options]="mySlideOptions" (ionWillChange)="onSlideChangeStart($event)">

    <ion-slide>
      <img #title1 src="assets/img/1.png" >
    </ion-slide>
    <ion-slide>
      <img #title2 src="assets/img/2.png" >
    </ion-slide>
    <ion-slide>
      <img #title3 src="assets/img/3.png" >
    </ion-slide>
  </ion-slides>
</ion-content>

Ionic2 ion-slides更改导航栏标题

1 个答案: