कोणीय 2 में अनुच्छेद में किसी शब्द को हाइलाइट करने के लिए कैसे करें?

Question

मैं कोणीय 1.x में यह किया है, लेकिन मैं पता है कि कैसे एक कीवर्ड

 <td><div highlight="var" keywords="somename">  {{paragraph}}</div></td> 

का उपयोग कर कोणीय 2..in कोणीय 1.x iam में एक गतिशील शब्द को हाइलाइट करना चाहते

मैं द्वारा ऊपर एचटीएमएल किया है नीचे कोणीय-light.js का उपयोग कर।

 angular.module('angular-highlight', []) 
     .directive('highlight', function() 
    { 

    var component = function(scope, element, attrs) { 

    if (!attrs.highlightClass) { 
     attrs.highlightClass = 'angular-highlight'; 
    } 

    var replacer = function(match, item) { 
     return '<span class="'+attrs.highlightClass+'">'+match+'</span>'; 
    } 
    var tokenize = function(keywords) { 
     keywords = keywords.replace(new RegExp(',$','g'), '').split(','); 
     var i; 
     var l = keywords.length; 
     for (i=0;i<l;i++) { 
      keywords[i] = '\\b'+keywords[i].replace(new RegExp('^ | $','g'), '')+'\\b'; 
     } 
     return keywords; 
    } 

    scope.$watch('keywords', function() { 
     //console.log("scope.keywords",scope.keywords); 
     if (!scope.keywords || scope.keywords == '') { 
      element.html(scope.highlight); 
      return false; 
     } 


     var tokenized = tokenize(scope.keywords); 
     var regex  = new RegExp(tokenized.join('|'), 'gmi'); 

     //console.log("regex",regex); 

     // Find the words 
     var html = scope.highlight.replace(regex, replacer); 

     element.html(html); 
    }); 
} 
return { 
    link:   component, 
    replace:  false, 
    scope:   { 
     highlight: '=', 
     keywords: '=' 
    } 
}; 
}); 

Answer 1

यदि कोई साधारण (सामान्य) समाधान में रूचि रखता है, तो मैं निर्देश (थिएरी टेम्पलर काम के आधार पर) के साथ आया था।

यह निर्देश आप के साथ काम करने के लिए पाठ पारित करने के लिए अनुमति देता है, खोज पाठ और एक वर्ग को लागू करने:

import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core'; 
import { escapeStringRegexp } from '../helpers/helper'; 

@Directive({ 
    selector: '[appColorSearchedLetters]' 
}) 
export class ColorSearchedLettersDirective implements OnInit { 
    @Input() search: string; 
    @Input() text: string; 
    @Input() classToApply: string; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    ngOnInit() { 
    if (typeof this.classToApply === 'undefined') { 
     this.classToApply = ''; 
    } 

    if (typeof this.search === 'undefined') { 
     this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.text); 
     return; 
    } 

    let search = escapeStringRegexp(this.search.toString()); 
    this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.replace(this.text, search)); 
    } 

    replace(txt: string, search: string) { 
    let searchRgx = new RegExp('('+search+')', 'gi'); 

    return txt.replace(searchRgx, `<span class="${this.classToApply}">$1</span>`); 
    } 
} 

और सहायक

import { escapeStringRegexp } from '../helpers/helper'; 

शामिल हैं:

let matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g; 

export function escapeStringRegexp (str) { 
    if (typeof str !== 'string') { 
    throw new TypeError('Expected a string'); 
    } 

    return str.replace(matchOperatorsRe, '\\$&'); 
}; 

यह फ़ंक्शन https://www.npmjs.com/package/escape-string-regexp से है और क्रेडिट सिंध्रेसोरस में जाता है।

यहां बताया गया है कि मैं इसे का उपयोग करें:

<span appColorSearchedLetters [search]="search" [text]="user.name" classToApply="searched"></span> 

Answer 2

मैं इस के लिए एक कस्टम निर्देश बनाना होगा:

@Directive({ 
    selector: '[highlight]' 
}) 
export class HighlightDirective { 
    @Input() 
    keywords:string; 

    highlightClass: string = 'highlight'; 

    constructor(private elementRef:ElementRef,private renderer:Renderer) { 

    } 

    replacer(match, item) { 
    return `<span class="${this.highlightClass}">${match}</span>`; 
    } 

    tokenize(keywords) { 
    keywords = keywords.replace(new RegExp(',$','g'), '').split(','); 
    return keywords.map((keyword) => { 
     return '\\b'+keyword.replace(new RegExp('^ | $','g'), '')+'\\b'; 
    }); 
    } 

    ngOnChanges() { 
    if (this.keywords) { 
     var tokenized = this.tokenize(this.keywords); 
     var regex = new RegExp(tokenized.join('|'), 'gmi'); 

     var html = this.elementRef.nativeElement.innerHTML.replace(regex, (match, item) => { 
     return this.replacer(match, item); 
     }); 

     this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', html); 
    } 
    } 
} 

और इस तरह इसका इस्तेमाल: (

@Component({ 
    selector: 'app' 
    template: ` 
    <p highlight keywords="test,angular2"> 
    this is a test to highlight words with angular2 
    </p> 
    `, 
    styles: [` 
    .highlight { 
     background-color: yellow; 
    } 
    `] 
    directives: [ HighlightDirective ] 
}) 
export class App { 
} 

इस्तेमाल किया है, तो आप एक हैक की जरूरत सकता है ViewEncapsulation के अनुसार में नकली एक - डिफ़ॉल्ट पर) लागू शैलियों को देखने में सक्षम होने के लिए एक विशेषता जोड़ने के लिए:

replacer(match, item) { 
    return `<span ${encapsulationAttribute} class="${this.highlightClass}">${match}</span>`; 
} 

ngOnChanges() { 
    this.initializeEncapsulationAttribute(); 
    (...) 
} 

initializeEncapsulationAttribute() { 
    if (!this.encapsulationAttribute) { 
    var attributes = this.elementRef.nativeElement.attributes; 
    for (var i = 0; i<attributes.length; i++) { 
     let attr = attributes[i]; 
     if (attr.name.indexOf('_ngcontent') != -1) { 
     this.encapsulationAttribute = attr.name; 
     break; 
     } 
    } 
    } 
} 

इस प्लंकर को देखें: https://plnkr.co/edit/XxB1pFEyUHlZetxtKMUO?p=preview।