javascript - Javascript警报进入离子登录页面
问题描述
我正在尝试将 JavaScript 警报简单地调用到 Ionic 应用程序的登录页面中。
但是它不起作用。
起初,我试图添加一个简单的警报,然后我需要在使用登录输入的左侧自动添加零。
如果我什至不能使用警报,想象一下添加更复杂的代码。
这是我在这里的html。
<ion-content padding class="content-bg-color">
<div class="logo-pagina-login">
<img src="assets/logo.svg" alt="Logo" />
</div>
<p class="acesse-sua-conta" [@acesseSuaContaIn]="estadoAnimacaoAcesseSuaConta">
Acesse sua conta
</p>
<ion-item class="form-input-value" [@texboxIn]="estadoAnimacaoTextBox">
<ion-label floating class="login-page-form">
<ion-icon name="contact"></ion-icon>
Usuário
</ion-label>
<ion-input type="text" autocapitalize="none" #txtLogin class="login-page-form"(ionBlur)="GetParamsPreAuthentication(txtLogin.value);"></ion-input>
</ion-item>
<ion-item class="form-input-value" [@texboxIn]="estadoAnimacaoTextBox">
<ion-label floating class="login-page-form">
<ion-icon name="unlock"></ion-icon>
Senha
</ion-label>
<ion-input [type]="senhaPasswordType" #txtSenha class="login-page-form"></ion-input>
<button ion-button icon-only item-end clear default class="loginPasswordIcon" (click)="TogglePasswordSenha()">
<ion-icon [name]="senhaPasswordIcon"></ion-icon>
</button>
</ion-item>
<div [ngClass]="{ 'hide-element': !habilitaData }">
<ion-item class="form-input-value" [@texboxIn]="estadoAnimacaoTextBox">
<ion-label #lbDataNascimento floating class="login-page-form">
<ion-icon name="calendar"></ion-icon>
{{lbDataNascimento.label}}{{textoCampoData}}
</ion-label>
<ion-datetime displayFormat="DD/MM/YYYY" #txtData cancelText="Cancelar" doneText="Selecionar"> </ion-datetime>
</ion-item>
</div>
<div [ngClass]="{ 'hide-element': !habilitaPergunta }">
<ion-item class="form-input-value" [@texboxIn]="estadoAnimacaoTextBox">
<ion-label floating class="login-page-form">
<ion-icon name="key"></ion-icon>
Resposta
</ion-label>
<ion-input [type]="respostaPasswordType" #txtResposta class="login-page-form"></ion-input>
<button ion-button icon-only item-end clear default class="loginPasswordIcon" (click)="TogglePasswordResposta()">
<ion-icon [name]="respostaPasswordIcon"></ion-icon>
</button>
</ion-item>
<ion-label #lbPerguntaChave class="login-page-form label-pergunta-chave">{{lbPerguntaChave.value}}{{preAuthentication.PerguntaChave}}</ion-label>
</div>
<button ion-button block color="secondary" class="btn-entrar" (click)="OnEntrarClick(txtLogin.value, txtSenha.value, habilitaPergunta ? txtResposta.value : '', habilitaData ? txtData : '');" [@buttonIn]="estadoAnimacaoBotao">Entrar</button>
<p class="esqueceu-a-senha" [@esqueciMinhaSenhaIn]="estadoAnimacaoEsqueciMinhaSenha">
Esqueceu a senha? <a (click)="OnEsqueciASenhaClick();">Clique aqui</a>
</p>
</ion-content>
我尝试在此页面中添加警报,但应用程序无法识别。我不确定为什么。关于可能发生的事情有什么想法吗?
谢谢你。
解决方案
在回答您的问题之前,我建议您使用Ionic 提供的AlertController来显示警报。您甚至可以在离子警报参考和示例代码中添加复选框、按钮和其他支持的元素:https ://ionicframework.com/docs/api/alert
您还可以选择将ModalController用于完全自定义的警报/提示框参考:https ://ionicframework.com/docs/api/modal
现在,回答您的问题:如果您想在您的 ionic 项目中使用自定义 javascript,您应该将其包含在ionic 框架生成的 index.html 文件中。要了解如何在 ionic 中添加自定义 javascript,请查看此答案:https ://stackoverflow.com/a/44134679/9088454
推荐阅读
- svg - 尝试使用 svg 精灵
- mysql - 如何加入两个表,但只包含右表中的每一行一次?
- swift - 使用用户定义的类
- c# - 如何遍历具有相同类型列表的对象列表并将每个对象添加到 TreeView?
- python - Matplotlib 的底图似乎不存储地图的中心,以便以后对数据进行过度绘制
- javascript - 如何将 JSON 文件数据导入 JS 文件并在 JS 控制台中输出 JSON 数据?
- c# - 如何为数组的第一个和第二个或最后一个和最后一个元素发送电子邮件
- amazon-s3 - 将 ffmpeg 转码结果流式传输到 S3
- awk - 如果 2 列中的值相同,则选择当前行和上一行
- java - 并发请求的 repo 类线程安全吗?- 弹簧靴