Javascript警报进入离子登录页面

Posted 2023-03-13

【中文标题】Javascript警报进入离子登录页面

【英文标题】：Javascript alert into ionic login page

【发布时间】：2020-01-21 16:18:33

【问题描述】：

我正在尝试将 javascript 警报简单地调用到 Ionic 应用程序的登录页面中。

但它不起作用。

首先，我尝试添加一个简单的警报，然后我需要在使用登录输入的左侧自动添加零。

如果我什至不能使用警报，想象一下添加更复杂的代码。

这是我这里的 html。

<ion-content padding class="content-bg-color">
 <div class="logo-pagina-login">
  <img src="assets/logo.svg"  />
 </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.labeltextoCampoData
      </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.valuepreAuthentication.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>

我尝试在此页面中添加警报，但应用无法识别。我不确定为什么。对可能发生的事情有任何想法吗？

谢谢。

【参考方案1】：

在回答您的问题之前，我建议您使用 Ionic 提供的 AlertController 来显示警报。您甚至可以在 ionic alert 中添加复选框、按钮和其他支持的元素 参考&示例代码：https://ionicframework.com/docs/api/alert

您还可以选择将 ModalController 用于完全自定义的警报/提示框 参考：https://ionicframework.com/docs/api/modal

现在，回答您的问题：如果您想在您的 ionic 项目中使用自定义 javascript，您应该将其包含在由 ionic 框架生成的 index.html 文件中。 要了解如何在 ionic 中添加自定义 javascript，请查看此答案：https://***.com/a/44134679/9088454