【发布时间】：2019-12-24 16:37:35
【问题描述】：
背景：
一段时间以来，所有点击事件都对我的 Ionic 应用程序起作用，然后突然停止。我有两个曾经有工作点击事件的浮动操作按钮；一个会触发一个 JS 警报弹出窗口，另一个会打开一个模式。
这些点击事件不再起作用，现在唯一具有有效点击事件的元素是我的 ion-tab-buttons。
我尝试过/测试过的内容：
我已经尝试从 ion-items 和 ion-lists 中解开这些元素，但仍然没有任何变化。
一个简单的离子按钮作为替代品，仍然没有变化。
将 ion-button 移到 card 元素之外，就在开始 ion-content 标签的下方，仍然没有变化。
将离子按钮移到离子内容之外；就在选项卡上方，仍然没有变化。
非常感谢任何帮助。
contact.page.html
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<img src="assets/logo.png" />
</div>
</ion-header>
<ion-content text-center>
<ion-card>
<ion-card-header>
<ion-card-title>Contact Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<br>
<ion-card-content>
<ion-label><b>Head Office: Wembley</b>
<br>
Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
DX: 51165 Wembley Park
We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
</ion-label>
<br>
<br>
<ion-list text-left>
<ion-item>
<ion-label>Call us on 0800 3881 0211</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
<ion-icon name="call"></ion-icon>
</ion-fab-button>
</ion-item>
<ion-item>
<ion-label>Email at admin@boutiquesolicitors.co.uk</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
<ion-icon name="mail"></ion-icon>
</ion-fab-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>contact.page.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { CallNumber } from '@ionic-native/call-number/ngx';
import { ModalController, AlertController } from '@ionic/angular';
import { EmailPage } from '../email/email.page';
@Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }
ngOnInit() {
}
about() {
console.log('clicked about')
this.router.navigate(['members/menu/about'])
}
dashboard() {
console.log('clicked dashboard')
this.router.navigate(['members/menu/dashboard'])
}
async callAlert() {
console.log('method executed')
const callAlert = await this.alertController.create({
message: "Are you sure you want to call Boutique Solicitors?",
buttons: [{
text: "Cancel",
role: "cancel"
},
{
text: "Call",
handler: () => {this.callBS()}
}
]
});
callAlert.present()
}
async callBS() {
this.callNumber.callNumber("07847948252", false)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err))
}
async modalEmail() {
const modal = await this.modalController.create ({
component: EmailPage
});
modal.present();
}
}
【问题讨论】：
标签： javascript angular typescript ionic-framework