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

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>

我想通过在类的顶部调用skip方法跳过这一页，而不点击按钮

怎么做呢?

Answer 1

根据@ kadath的建议，更改您的跳过方法定义，如下所示

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

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

constructor(){
this.skip();
}

希望这对你有帮助。