如何在滑块的末尾创建一个可以更改并可以显示 Ionic 4 中的下一张幻灯片的按钮？
How can I create a button at the end of a slider which can change and can show the next slides in Ionic 4?
我正在尝试在滑块下方添加一个按钮，按下该按钮会将我移动到滑块上的下一张幻灯片。在最后一张幻灯片上，我希望更改按钮。我已经尝试了几个函数，如 Swipenext 和 nex 函数，但它仍然无法正常工作，我收到了很多错误。当我按下页面末尾的下一个按钮转到下一张幻灯片时，我在控制台上收到两个错误并且该按钮不起作用。一个错误指出 "Cannot read property 'getactiveindex' of undefined" 是 .ts 文件中下一个函数的一部分，在本地终端上没有错误并且编译成功。我也在尝试更改最后一张幻灯片中的文本，我已经尝试了 ionslidechange() 函数，但它不起作用
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
[options]="slideOpts" autoplay="false" (ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}
Console when I press the next button
ERROR TypeError: slides.getActiveIndex is not a function
at HomePage.ionSlideChange (home.page.ts:29)
at Object.eval [as handleEvent] (HomePage.html:22)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
View_HomePage_0 @ HomePage.html:21
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-ca0488fc.js:1999
(anonymous) @ swiper.bundle-ccdaac54.js:1078
(anonymous) @ swiper.bundle-ccdaac54.js:1077
emit @ swiper.bundle-ccdaac54.js:1071
transitionEnd @ swiper.bundle-ccdaac54.js:1906
slideTo @ swiper.bundle-ccdaac54.js:1994
init @ swiper.bundle-ccdaac54.js:3919
Swiper @ swiper.bundle-ccdaac54.js:3762
initSwiper @ ion-slide_2-md.entry.js:231
async function (async)
initSwiper @ ion-slide_2-md.entry.js:229
(anonymous) @ ion-slide_2-md.entry.js:71
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
(anonymous) @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
schedule @ core-ca0488fc.js:1764
initializeComponent @ core-ca0488fc.js:1775
async function (async)
initializeComponent @ core-ca0488fc.js:1713
(anonymous) @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}
好的，伙计们，我犯了一个非常愚蠢的错误。我应该在 html 页面的 ionslides 中添加#slides。我希望这对其他人有帮助
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
#slides [options]="slideOpts" autoplay="false"
(ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all
around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}
我正在尝试在滑块下方添加一个按钮，按下该按钮会将我移动到滑块上的下一张幻灯片。在最后一张幻灯片上，我希望更改按钮。我已经尝试了几个函数，如 Swipenext 和 nex 函数，但它仍然无法正常工作，我收到了很多错误。当我按下页面末尾的下一个按钮转到下一张幻灯片时，我在控制台上收到两个错误并且该按钮不起作用。一个错误指出 "Cannot read property 'getactiveindex' of undefined" 是 .ts 文件中下一个函数的一部分，在本地终端上没有错误并且编译成功。我也在尝试更改最后一张幻灯片中的文本，我已经尝试了 ionslidechange() 函数，但它不起作用
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
[options]="slideOpts" autoplay="false" (ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}
Console when I press the next button
ERROR TypeError: slides.getActiveIndex is not a function
at HomePage.ionSlideChange (home.page.ts:29)
at Object.eval [as handleEvent] (HomePage.html:22)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
View_HomePage_0 @ HomePage.html:21
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-ca0488fc.js:1999
(anonymous) @ swiper.bundle-ccdaac54.js:1078
(anonymous) @ swiper.bundle-ccdaac54.js:1077
emit @ swiper.bundle-ccdaac54.js:1071
transitionEnd @ swiper.bundle-ccdaac54.js:1906
slideTo @ swiper.bundle-ccdaac54.js:1994
init @ swiper.bundle-ccdaac54.js:3919
Swiper @ swiper.bundle-ccdaac54.js:3762
initSwiper @ ion-slide_2-md.entry.js:231
async function (async)
initSwiper @ ion-slide_2-md.entry.js:229
(anonymous) @ ion-slide_2-md.entry.js:71
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
(anonymous) @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
schedule @ core-ca0488fc.js:1764
initializeComponent @ core-ca0488fc.js:1775
async function (async)
initializeComponent @ core-ca0488fc.js:1713
(anonymous) @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}
好的，伙计们，我犯了一个非常愚蠢的错误。我应该在 html 页面的 ionslides 中添加#slides。我希望这对其他人有帮助
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
#slides [options]="slideOpts" autoplay="false"
(ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all
around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}