Как обнаружить @ на входе, используя ионный 4?

Question

Я хочу сделать что-то вроде постов в твиттере, где пользователи пишут его посты и когда пишут @, чтобы открыть список пользователей и нажать, чтобы добавить в поле ввода. так что вы можете пометить кого-либо в своем посте. Для этого я попытался проверить первый символ, да, он работает, но при вводе в любом месте я набираю @, чтобы запустить функцию или открыть список пользователей.

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>

page.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");
  }
 }

Answer 1

Упоминания

Я немного покопался в этом и нашел для пользовательского интерфейса термин "упоминания".

Поиск, который вызывает довольно много вариантов, например:

• dmacfarlane / angular-упоминания: угловые упоминания для текстовых полей.

Какой порт для ныне несуществующей директивы 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 type="text" [mention]="items">
<ion-input [mention]="items"></ion-input>

Где items - строковый массив предлагаемых элементов. Например:

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