【问题标题】:Click on a button within an ion-footer doesn't execute (click) function at first单击离子页脚中的按钮首先不执行(单击)功能
【发布时间】:2017-06-13 13:19:56
【问题描述】:

我正在开发与 Ionic 2 的聊天。我使用了键盘附加指令。

//View
    <ion-footer [keyboardAttach]="content">
      <ion-toolbar class="text_send">
        <ion-textarea class="textarea" fz-elastic placeholder="Message" [(ngModel)]="message"></ion-textarea>
        <button ion-button small icon-only round color="secondary" (click)="onSend()">
          <ion-icon name="send"></ion-icon>
        </button>
      </ion-toolbar>
    </ion-footer>

// Controller
onSend() {
    console.log('Send new message ', this.message);
    if (this.id === 'new') {
      this.messageService.createChatAndSendFirstMessage(this.cuid, this.recipientUid, this.message)
      .then(newChatId => {
        // Get last messages of the new chat so that it gets displayed in the view
        this.messages$ = this.messageService.getLastMessages(newChatId, this.ccompany, 20);
        // Update chat id in case the user send more than 1 message
        // In this case it should be the regular behavior for non new messages
        this.id = newChatId;
      })
      .catch(error => console.log('ChatPage#onSend - Error while sending new message ', error));

    } else {
      // If a chat already exists with this user
      this.messageService.sendMessage(this.id, this.cuid, this.recipientUid, this.message)
      .catch(error => console.log('ChatPage#onSend - Error while sending new message ', error));
    }

    // Empty the message input
    this.message = '';
  }

当我在 iOS 上模拟我的代码并单击文本区域时,键盘显示:完美。

唯一的问题是,当我单击发送按钮时,键盘隐藏但未执行 onSend() 函数,我必须再次单击它。

我怎么可能只点击一次,而这一次点击会隐藏键盘并执行我的 onSend() 代码?

【问题讨论】:

    标签: angular ionic2 ionic-keyboard


    【解决方案1】:

    我在我的应用程序的各个部分做同样的事情,使用键盘附加指令,没有问题。我认为这可能是由您使用的 (click) 发射器引起的。

    尝试将其更改为 (点击)

    我认为在 ios safari 中使用 (click) 存在一些已知问题。 ionic2 tap vs click

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-09-16
      • 1970-01-01
      • 1970-01-01
      • 2023-03-15
      • 1970-01-01
      • 1970-01-01
      • 2019-06-21
      相关资源
      最近更新 更多