angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
更新時間：2018年08月17日 14:07:36 作者：全棧弄潮兒
這篇文章主要介紹了angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，分享給大家，具體如下：
添加一個pipe：
import { Pipe, Injectable, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'keyword'
})
@Injectable()
export class KeywordPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(val: string, keyword: string): any {
const Reg = new RegExp(keyword, 'i');
if (val) {
const res = val.replace(Reg, `<span style="color: #81E1B7;">${keyword}</span>`);
console.log(res);
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
}
注： DomSanitizer，這個的目的是是數(shù)據(jù)在頁面上的綁定能夠safe的解析
html中使用方法：
<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>
注： 在標(biāo)簽里面用新的標(biāo)簽包起來，不然會有樣式問題； 要用innerHTML來綁定數(shù)據(jù)。
演示效果
開源項目地址：https://github.com/alex-0407/ionic3-awesome
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要講解AngularJS模塊的相關(guān)知識，這里整理了詳細(xì)的基礎(chǔ)資料，并提供示例代碼和示例實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細(xì)介紹了安裝步驟和注意事項，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09
這篇文章主要介紹了AngularJS 仿微信圖片手勢縮放的實(shí)例的相關(guān)資料,希望大家通過本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS 支付倒計時功能實(shí)現(xiàn)思路
這篇文章主要介紹了AngularJS 支付倒計時功能的實(shí)現(xiàn)思路,需要的朋友可以參考下2017-06-06
基于datepicker定義自己的angular時間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了將angular-ui的分頁組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會對大家的學(xué)習(xí)或者工作覺有一定的參考價值，需要的朋友下面來一起看看吧。2017-05-05
這篇文章主要介紹了淺談Angular7 項目開發(fā)總結(jié)，本文在此做一次遇到問題的總結(jié)，以便知識的掌握，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Angularjs實(shí)現(xiàn)多個頁面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實(shí)現(xiàn)多個頁面共享數(shù)據(jù)的方式，通過定義一個共享服務(wù)service來實(shí)現(xiàn)此功能，對angularjs共享數(shù)據(jù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要為大家詳細(xì)介紹了AngularJs分頁插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06