Javascript 警报进入 ionic 登录页面

Question

我正在尝试简单地将 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>

我尝试在此页面中添加提醒，但应用无法识别。我不知道为什么。对可能发生的事情有什么想法吗？

谢谢。

Answer 1

在回答您的问题之前，我建议您使用Ionic提供的AlertController来显示警报。您甚至可以在 ionic 警报内添加复选框、按钮和其他支持的元素 引用和示例代码: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