时间戳

首页 > 解决方案 > Ionic 6 Angular，Ion-Slide.slideNext() 在自定义按钮事件中不起作用

angular - Ionic 6 Angular，Ion-Slide.slideNext() 在自定义按钮事件中不起作用

问题描述

我有一个家庭组件，其中包含我的离子幻灯片的滑块项目组件。在家里，我有一个包含上一个和下一个按钮的离子头。

home.page.ts：

import { Component, ViewChild } from '@angular/core';
import { DataService, Item } from '../services/data.service';
import { SliderItemComponent } from '../slider-item/slider-item.component';
...
export class HomePage {
  @ViewChild(SliderItemComponent) slides;
  ngAfterViewInit(){
     this.slides.onlyExternal = true;
  }
...
  nextSlide(){
    console.log(this.slides);
    this.slides.slideNext();
  }

滑块项目 html：

<ion-slides modes="md" #slides>

home.page.html：

<ion-button (click)="nextSlide(slides)">Pick</ion-button>

当我单击按钮时，我得到：

SliderItemComponent {data: DataService, __ngContext__: LComponentView_HomePage(294)} //console.log here
core.js:6479 ERROR TypeError: this.slides.slideNext is not a function

所以我看到 this.slider 正确捕获了元素/组件......我错过了什么？

标签： angularionic-frameworkion-slides

解决方案

我使用 IonSlides 作为类型，但没有帮助。对我来说，上述解决方案不起作用（离子 v6.17.1）。起作用的是：

@ViewChild('slides', {static: true}) slides: ElementRef;

swipeRight() {
this.slides.nativeElement.slideNext();

改变{static: true}没有抛出任何错误

推荐阅读