Question

有。我想知道如何在离子加载的Ionic V4中使用事件“ ionLoadingWillPresent”。

我知道IonLoading是一个接口，这里是源代码：

interface IonLoading extends JSXBase.HTMLAttributes<HTMLIonLoadingElement> {
//...
   'onIonLoadingWillPresent'?: (event: CustomEvent<void>) => void;
//...
}

这是一个接口。

这是我的代码：

  constructor(
    public loadingController: LoadingController,
    public ionLoading: HTMLIonLoadingElement
  ) {}

  async triggerLoading() {
    const loading = await this.loadingController.create({
      message: '',
      duration: 2000,
      backdropDismiss: false,
      showBackdrop: false,
      spinner: 'dots',
      translucent: false,
    });
    // Here is my try, I use getTop methods to get the Ion-Loading Elements.
    this.ionLoading = await this.loadingController.getTop();

    this.ionLoading.onIonLoadingWillPresent = ()=> {
      console.log('hello')
    };
    // events
    await loading.present();
    await loading.onDidDismiss();
    console.log('loading is didmissed!');
  }

- 更新：

    this.loadingController.getTop().then(res => {
      res.addEventListener('ionLoadingWillPresent', (event: any) => {
        // no console from this code
        console.log(event);
      });
    });

-

但是，小问题，ionLoading没有属性onIonLoadingWillPresent，如何使用此事件？

诸如此类的事件

ionLoadingDidDismiss，ionLoadingDidPresent，ionLoadingWillDismiss，ionLoadingWillPresent。

在页面上：ion-loading Api

我想知道如何使用这些事件。非常感谢。

P.S：onDidDismiss组件已经没有方法onWillDismiss，ion-loading-controller。

Answer 1

我认为您可以订阅这样的活动：

this.ionLoading.addEventListener('ionLoadingWillPresent', (event: any) => {
});

如果这不能解决问题，那么我不确定您获得ionLoading参考的方式是否正确，但是我需要为此找到一个代码段。

Answer 2

如果还有其他人试图将willPresent呈现给toast（），则它被重构为处理其自身的事件，而不是从v4开始的加载事件，请参见https://ionicframework.com/docs/api/toast

this.$ionic.toastController .create({blah}).then((t) => { t.addEventListener("ionToastDidPresent", () => { on present }) }

如何使用离子加载事件“ ionLoadingWillPresent”？

2 个答案: