（好久没更~~~
）
因为APP需要聊天的功能，那么emoji表情输入就必不可少了。说起来有点奇怪，差点喷一口老血，晚上写好了，死命都跑不通，明一早起来就跑通了，该不会是某些代码保存失败了吧。大概吧。。。
使用angular和ionic 构建这个表情输入异常简单，这里就简单给大家说明一下（我估计网上也没有）。
首先使用angular的cli命令生成我们自己的自定义组件，这应该算是angular的核心内容了。这样我们就可以直接用自己创建的标签生成一个emoji表情控件，而不用频繁的操作DOM(次要的代码可能会省略，代码整理好后会传上来链接)。
开始的时候先来看看效果吧。
emoji本身你可以理解为string类型的字符串，这样理解应该也不会造成太大的不适应。
1. 首先我们通过cli命令创建了名为 emojipick 的component的，好的我们需要把他加入到app.model中，这样我们就可以在全局中任意地方使用这个我们自定义的标签了。
2.有了component，我们还需要给我们提供emoji表情的provider，那么我们再次使用angular的cli 命令生成一个自定的provider，并用它来给我们的component提供表情。这里把server命名为emoji。
emoji.js如下:
@Injectable()
export class EmojiProvider {//注意export
constructor() {
console.log('Hello EmojiProvider Provider');
}
getEmoji(){//在外部获取emoji。
const EMOJIS ="😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 🤡 🤠 😏 😒 😞 😔 😟 😕 🙁" +
" ☹️ 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 🤤 😭 😓 😪 😴 🙄 🤔 🤥 😬 🤐 🤢 🤧 😷 🤒 🤕 😈 👿" +
" 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚" +
" 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🤳 💅 🖖 💄 💋 👄 👅 👂 👃 👣 👁 👀 🗣 👤 👥 👶 👦 👧 👨 👩 👱♀️ 👱 👴 👵 👲 👳♀️ 👳 👮♀️ 👮 👷♀️ 👷";
let array=EMOJIS.split(" ");//以空格来区分每一个emoji
let grounNumber=Math.ceil(array.length/24);
let item=[];
for(let i=0;i
item.push(array.slice(24*i,24*(i+1)));//分组
}
return item;
}
}
好的提供给component的provider 我们已经写好了，现在开始处理component吧：
先来看一下component的目录结构：
import {Component,forwardRef}from '@angular/core';//引入必要的文件
import {ControlValueAccessor,NG_VALUE_ACCESSOR}from "@angular/forms";
import { EmojiProvider }from '../../providers/emoji/emoji';
/**
* Generated class for the EmojiPickComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
export const EMOJI_ACCESSOR:any = {
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>EmojiPickComponent),
multi:true
}
@Component({
selector:'emoji-pick',//标签
templateUrl:'emoji-pick.html',
providers:[EMOJI_ACCESSOR]
})
export class EmojiPickComponentimplements ControlValueAccessor{
emojiArray=[];
content:string;
text:string;
onChanged:Function;
onTouched:Function;
/*这里我们实现了ControlValueAccessor， ControlValueAccessor到底是什么东西呢？：
ControlValueAccessor充当Angular Forms API和DOM中的本地元素之间的桥梁。
如果我们需要操作表单控制指令我们需要实现他的几个方法：（分别是下面的1，2，3）
constructor(public emoji:EmojiProvider) {
this.emojiArray=this.emoji.getEmoji();
}
writeValue(obj:any):void {//1
//为该元素写入一个新的值
this.content=obj;
}
registerOnChange(fn:any):void {//2
//当ui中的控件组发生值得改变是就会调用
this.onChanged=fn;
//console.log("this is ok?");
this.setValue(this.content);
}
registerOnTouched(fn:any):void {//3
//控件收到事件时调用
this.onTouched=fn;
}
setValue(val:any){
this.content+=val;
if(this.content){
this.onChanged(this.content);//表情不一定只输入一个
}
}
}
下面是html ：
<div class="emoji-picker">
<div class="emoji-items">
<ion-slides pager>//滑块
<ion-slide *ngFor="let items of emojiArray">//遍历emoji
<span class="emoji-item" (click)="setValue(item)" *ngFor="let item of items">
{{item}}//每一个单独的表情
</span>
</ion-slide>
</ion-slides>
</div>
</div>
到这里，事情已经完成了大半部分。接着，在你要使用的地方调用这个表情就可以了，接下来就是使用ng控制样式和显示与否了：
LIke this：
<ion-footer no-border [style.height]="emojiPickflag? '255px':'55px' ">
<ion-grid>
<ion-row>
<ion-col col-2>
<button ion-button icon-only clear item-right (click)="swithEmojiPicker()">
<ion-icon name="md-happy"></ion-icon>
</button>
</ion-col>
<ion-col col-8>
<ion-textarea placeholder="说点什么吧" [(ngModel)]="editEmoji"></ion-textarea>
</ion-col>
<ion-col col-2>
<button ion-button icon-only clear item-left (click)="sendMessage()">
<ion-icon name="ios-send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<emoji-pick *ngIf="emojiPickflag" [(ngModel)]="editEmoji"></emoji-pick>
</ion-footer>
我们使用ngModel 绑定表情输入到input 中用emojiPickflag 来控制是否显示表情输入，好了，表情输入部分已经搞定了（讲的不咋滴啊。。。。。。）。
公众号已经更名为:没才艺的普通人
网友评论