Change @user function to dynamic

foreword

Make an issue, the requirements are like this

He said @ is something like this

When you enter @, a list of users who can be @ will pop up.

solve

At first, I thought to solve it from the html level, and see if the input tag can limit the input content.

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

It is found that several events can be added. The above code is to limit the input content to numbers. The onkeyup event is executed whenever the input is entered, and we set a method to replace non-numbers with null. It uses regular expressions to detect non-numbers.

The onpaste event is executed whenever pasting, we set the same method.

The oncontextmenu event is rarely used, and those who are interested can learn about it.

Modify the replacement rule to replace empty when '@' is detected. The test input does not pop up a list of users who can be @. This prohibition of input is not that input @ does not respond, but input @ will appear for 0.5 seconds and then disappear.
The next step is to make this kind of event dynamic. When it is a partner, the event is enabled, and when it is a partner, the event is not enabled.

It was written like this at the time, but it didn't take effect, and no problem was found. Then I thought about it carefully and found that it is not right to write it out. If we enter an email address, we can't enter the @ symbol. We just want him not to pop up the user list, and finally we can't enter the @ symbol.

The teacher also suggested that it is not very good to write this way. This is equivalent to adding a monitor. When the input of the @ symbol is monitored, the @ symbol is replaced with empty. And popping up the user list is equivalent to another listener. When the @ symbol is detected, the user list is popped up. The two listening events probably don't matter, so it doesn't work.

If you don't want to pop up the user list, we can hide the user list.
Find the relevant html code, and then add *ngIf = "false" , the result is not hidden, I once suspected that I had found the wrong relevant html code.

After asking the teacher, I found that this is an angular ng-template template tag. The ng-template will not be rendered by the page, but will be replaced with the actual content we define to be displayed. So ngif didn't take effect.
In fact, *ngIf = "false" is implemented by ng-template, we write a code <div *ngIf="hero" >{{hero.name}}</div> , this code will be parsed as

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

*ngif is just a shorthand, and actually has the same effect as the above code. This simplification of writing and having the same functionality becomes syntactic sugar. For example, in java, the writing method of Integer integer = 12; Integer integer = new Integer(12); has the same effect as the writing method of ---f0c817fc4941e68a6db551680d56c1b7---. In order to simplify the writing, we generally use the first one.

will eventually be replaced with a gaze

To change our thinking, we set the @ user list array to be empty, so that the pop-up user list event will also be triggered when @ is entered, but the user list is empty, so it does not appear to be displayed.

Being able to @ a person not only pops up the user list when entering @, but also reminds the person being @ when it detects '@XXX (the name of a person who can @)' when submitting the input. This setting also removes the execution of the @ function when submitting.