时间戳

首页 > 解决方案 > 如何使用 ionic 4 检测输入中的@？

angular - 如何使用 ionic 4 检测输入中的@？

问题描述

我想做喜欢用户写他的帖子的推特帖子，以及在写@打开用户列表并单击以添加输入时。这样您就可以在帖子中标记任何人。对于这些事情，我尝试首先检查 char 是的，它正在工作，但是在输入任何地方我键入 @ 以运行函数或打开用户列表。

page.html

  <ion-item>
    <ion-textarea rows="3" (input)="searchPeople($event)" cols="20" formControlName="comment"
      placeholder="Tweet your reply" spellcheck="true" autoComplete="true" autocorrect="true" autofocus required>
    </ion-textarea>
  </ion-item>

页面.ts

searchPeople(ev: any) {
  // set val to the value of the searchbar
  let val = ev.target.value;
  let firstchar = val.charAt(0);

  if (firstchar === "@") {
    console.log("search people");
  }
  else if (firstchar === "#") {
    console.log("hash tag");
  } else {
    console.log("error");
  }
 }

标签： angularionic-frameworkionic4

解决方案

提及

我对此进行了一些研究，发现它的 UI 术语是“提及”。

搜索会带来很多选项，例如：

这是现已失效的 AngularJS 指令 Ment.io 的一个端口。

设置：

您可以通过执行以下操作进行设置：

使用以下命令将包作为依赖项添加到您的项目中：

npm install angular-mentions

将 CSS 添加到 index.html：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

将模块添加到您的 app.module 导入中：

import { MentionModule } from 'angular-mentions';
...

@NgModule({
    imports: [ MentionModule ],
    ...
})

将[mention]指令添加到您的 input/ion-input 元素：

<input type="text" [mention]="items">
<ion-input [mention]="items"></ion-input>

Whereitems是要建议的项目的字符串数组。例如：

items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

推荐阅读