javascript 如何在离子交换机中无按钮触发点击事件

wfveoks0  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(92)

我有以下代码的 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>

我想通过调用类顶部的skip方法跳过此页,而不单击按钮
怎么做呢?

nwlls2ji

nwlls2ji1#

按照@Kaddath的建议,如下所示更改skip方法定义

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

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

在类构造函数中,这将是第一个被执行的方法,你需要调用skip方法。

constructor(){
 this.skip();
}

希望这对你有帮助。

相关问题