改@使用者功能為動態

小強Zzz發表於2022-05-09

前言

做一個issue，要求是這樣的
image.png
他說的@是類似於這樣的
image.png
當輸入@時，會彈出可以@的使用者列表。

解決

一開始想到從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事件很少用到，感興趣的可以瞭解瞭解。

image.png

修改為替換規則為當檢測到 '@'時替換為空。測試輸入並沒有彈出可以@的使用者列表。這種禁止輸入並不是輸入@沒有反應，而是輸入@會出現0.5秒然後再消失。
接下來就是把這種事件變為動態，當為合作伙伴時，啟用事件，當部位合作伙伴時，不啟用事件。

image.png

當時這麼寫的，然後沒有生效，沒找到問題。然後仔細一想，發現如果寫出來也不太對，如果輸入一個郵箱地址的話，我們這樣就沒法輸入@符號了，我們只想他不彈出使用者列表，最後導致無法輸入@符號了。

老師也建議這麼寫不太好，這相當於加入一個監聽，當監聽到輸入@符號時，將@符號用空替換。而彈出使用者列表相當於另一個監聽，當監聽到@符號時去彈出使用者列表。兩個監聽事件可能並沒有影響，所以不起作用。

image.png

如果不想彈出使用者列表，我們把使用者列表隱藏掉就好了。
找到相關html程式碼，然後加上*ngIf = "false"，結果並沒有隱藏掉，一度懷疑自己找錯相關html程式碼了。

58CC9BE7-516E-4ABF-A0AB-1D5AE6660B50.png

問了老師後，發現這是一個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);寫法效果相同。為簡化寫法，我們一般採用第一種。

最後會被替換成一個注視
image.png

改變思路，我們將@的使用者列表陣列設定為空，這樣其實當輸入@時也會觸發彈出使用者列表事件，但是使用者列表為空，所以看起來是不顯示的。

能@一個人，不僅僅當輸入@時能彈出使用者列表，還要在提交輸入內容時檢測到含有'@XXX(能@的人名)'時要提醒被@的人。這樣設定也可以去除當提交時@功能的執行。

相關文章