Ben açısal 1.x yapmış ama bir anahtar kelimeparagraftaki bir kelimeyi açısal 2 olarak nasıl vurgulanır?
<td><div highlight="var" keywords="somename"> {{paragraph}}</div></td>
kullanarak açısal 2..in açısal 1.x iam dinamik kelimeyi vurgulamak için nasıl bilmek istiyorum
ben yukarıdaki html yapmış Aşağıdaki angular-highlight.js kullanılarak.
@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);
}
}
}
Ve bu gibi kullanmak:
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: '='
}
};
});
"innerHTML" i doğrudan değiştirmek için angular2 + tarafından önerilmektedir? –
Doğrudan "renderer" ile değil – Maxime