如何在离子中触发没有按钮的点击事件

Question

我有 typescript 文件的以下代码

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

import { CoreConfig } from '@services/config';
import { CoreUtils } from '@services/utils/utils';
import { CoreLoginHelperProvider } from '@features/login/services/login-helper';
import { ModalController } from '@singletons';

/**
 * Component that displays onboarding help regarding the CoreLoginSitePage.
 */
@Component({
    selector: 'core-login-site-onboarding',
    templateUrl: 'site-onboarding.html',
    styleUrls: ['site-onboarding.scss', '../../login.scss'],
})
export class CoreLoginSiteOnboardingComponent {

    step = 0;

    /**
     * Go to next step.
     *
     * @param e Click event.
     */
    next(e: Event): void {
        e.stopPropagation();

        this.step++;
    }

    /**
     * Go to previous step.
     *
     * @param e Click event.
     */
    previous(e: Event): void {
        e.stopPropagation();

        if (this.step == 0) {
            ModalController.dismiss();
        } else {
            this.step--;
        }
    }

    /**
     * Close modal.
     *
     * @param e Click event.
     */
    skip(e: Event): void {
        e.stopPropagation();

        this.saveOnboardingDone();
        ModalController.dismiss();
    }

    /**
     * Create a site.
     *
     * @param e Click event.
     */
    gotoWeb(e: Event): void {
        e.stopPropagation();

        this.saveOnboardingDone();

        CoreUtils.openInBrowser('https://moodle.com/getstarted/', { showBrowserWarning: false });

        ModalController.dismiss();
    }

    /**
     * Saves the onboarding has finished.
     */
    protected saveOnboardingDone(): void {
        CoreConfig.set(CoreLoginHelperProvider.ONBOARDING_DONE, 1);
    }

}

这是 HTML 代码

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button fill="clear" (click)="previous($event)" [attr.aria-label]="'core.back' | translate">
                <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title></ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
                {{'core.skip' | translate}}
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <div>
        <div class="ion-text-center ion-padding core-login-site-logo">
            <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation" alt="">
        </div>

        <h3 class="core-login-onboarding-step">
            {{'core.login.onboardingwelcome' | translate}}
        </h3>

        <div *ngIf="step == 0" class="core-login-onboarding-step">
            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                {{'core.login.onboardingimalearner' | translate}}
            </ion-button>
            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" fill="outline">
                {{'core.login.onboardingimaneducator' | translate}}
            </ion-button>
        </div>

        <div *ngIf="step == 1" class="core-login-onboarding-step">
            <p class="core-login-onboarding-text">
                {{ 'core.login.onboardingtoconnect' | translate }}
            </p>
            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                {{ 'core.login.onboardingialreadyhaveasite' | translate }}
            </ion-button>
            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom">
                {{ 'core.login.onboardingineedasite' | translate }}
            </ion-button>
        </div>

        <div *ngIf="step == 2" class="core-login-onboarding-step">
            <ul class="core-login-onboarding-text ion-text-start">
                <li>
                    <ion-icon name="far-check-circle" aria-hidden="true">
                    </ion-icon> {{ 'core.login.onboardingcreatemanagecourses' | translate }}
                </li>
                <li>
                    <ion-icon name="far-check-circle" aria-hidden="true">
                    </ion-icon> {{ 'core.login.onboardingenrolmanagestudents' | translate }}
                </li>
                <li>
                    <ion-icon name="far-check-circle" aria-hidden="true">
                    </ion-icon> {{ 'core.login.onboardingprovidefeedback' | translate }}
                </li>
            </ul>

            <ion-button expand="block" (click)="gotoWeb($event)" class="ion-margin-bottom">
                {{ 'core.login.onboardinggetstarted' | translate }}
            </ion-button>
        </div>
    </div>
</ion-content>

我想通过调用 class 顶部的 skip 方法跳过此页面，而无需单击按钮

怎么做？

Answer 1

正如@Kaddath 所建议的那样，更改您的跳过方法定义，如下所示

/**
     * Close modal.
     *
     * @param e Click event.
     */
    skip(e: Event = null): void {
      if(e){
        e.stopPropagation();
      }

        this.saveOnboardingDone();
        ModalController.dismiss();
    }

在第一个要执行的方法 class 构造函数中，您需要调用 skip 方法。

constructor(){
 this.skip();
}

希望这会帮助你。