改@用户功能为动态

前言

做一个issue，要求是这样的

他说的@是类似于这样的

当输入@时，会弹出可以@的用户列表。

解决

一开始想到从html层面解决，看看input标签有没有可以限制输入内容。

<input οnkeyup="value=value.replace(/[^0-9]/g,'')" οnpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')">

查到可以添加几个事件，上述代码为限制input输入内容为数字。onkeyup事件每当输入就会执行，我们设置一个方法，替换非数字为空。里面检测非数字用到了正则表达式。

onpaste事件每当粘贴时执行，我们设置同样的方法。

oncontextmenu事件很少用到，感兴趣的可以了解了解。

修改为替换规则为当检测到 '@'时替换为空。测试输入并没有弹出可以@的用户列表。这种禁止输入并不是输入@没有反应，而是输入@会出现0.5秒然后再消失。
接下来就是把这种事件变为动态，当为合作伙伴时，启用事件，当部位合作伙伴时，不启用事件。

当时这么写的，然后没有生效，没找到问题。然后仔细一想，发现如果写出来也不太对，如果输入一个邮箱地址的话，我们这样就没法输入@符号了，我们只想他不弹出用户列表，最后导致无法输入@符号了。

老师也建议这么写不太好，这相当于加入一个监听，当监听到输入@符号时，将@符号用空替换。而弹出用户列表相当于另一个监听，当监听到@符号时去弹出用户列表。两个监听事件可能并没有影响，所以不起作用。

如果不想弹出用户列表，我们把用户列表隐藏掉就好了。
找到相关html代码，然后加上*ngIf = "false"，结果并没有隐藏掉，一度怀疑自己找错相关html代码了。

问了老师后，发现这是一个angular的ng-template模版标签，ng-template并不会被页面渲染，而是会被替换成我们定义的要显示的实际内容。所以ngif并没有生效。
其实*ngIf = "false"，就是通过ng-template实现的，我们写一个代码<div *ngIf="hero" >{{hero.name}}</div>，这个代码会被解析为

<ng-template [ngIf]="hero">
  <div>{{hero.name}}</div>
</ng-template>

*ngif只是一个简写，实际跟上述代码效果相同。这种简化书写并有相同功能成为语法糖。比如 java 中Integer integer = 12;写法与Integer integer = new Integer(12);写法效果相同。为简化写法，我们一般采用第一种。

最后会被替换成一个注视

改变思路，我们将@的用户列表数组设置为空，这样其实当输入@时也会触发弹出用户列表事件，但是用户列表为空，所以看起来是不显示的。

能@一个人，不仅仅当输入@时能弹出用户列表，还要在提交输入内容时检测到含有'@XXX(能@的人名)'时要提醒被@的人。这样设置也可以去除当提交时@功能的执行。