[英]angular2 pipe and directive highlightterm is not working in IE11
嗨,我尝试达到过滤搜索条件的目的,应该突出显示文本,因此我使用了第一个指令,现在切换到管道以在IE11浏览器中进行测试,下面是代码。 但是下面的代码在chrome和firefox中可以正常工作,不确定不确定为什么要在IE11中获取此错误。请使用angular2 2.2.3帮助一些人克服这个错误
Highlight.pipe.ts:
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
transform(text: string, search): string {
if (search && text) {
let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
pattern = pattern.split(' ').filter((t) => {
return t.length > 0;
}).join('|');
const regex = new RegExp(pattern, 'gi');
return text.replace(regex, (match) => `<span class="search-highlighterm">${match}</span>`);
} else {
return text;
}
}
}
零件:
@Component({
selector: 'xxx',
template:
`
<span class="title" [innerHTML]="text | highlight: searchTerm">{{text}}'
)
或者如果我使用如下指令
<span class="title" [highlight]="search" >{text}}
出现如下错误
- inline template:6:102 caused by: Invalid argument.
ORIGINAL EXCEPTION: Invalid argument.
ORIGINAL STACKTRACE:
Error: Invalid argument.
at DomRenderer.prototype.setText (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:42348:67)
at DebugDomRenderer.prototype.setText (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:71926:72)
at View_xxxxx1.prototype.detectChangesInternal (Function code:326:5)
at AppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73431:9)
at DebugAppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73524:13)
at ViewContainer.prototype.detectChangesInNestedViews (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73616:17)
at View_xxxxx0.prototype.detectChangesInternal (Function code:114:3)
at AppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73431:9)
at DebugAppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73524:13)
我看不到您尝试使用Directive,这是我的解决方案。 我无法在IE上测试它,因为我使用的是Ubuntu。
@Directive({
selector: '[highlight]'
})
class WrapBold implements OnInit {
@Input('highlight')
public set search (val: string) {
this._search = val;
this.highlightText();
}
public get search () : string {
return this._search;
}
private originEl: HTMLElement;
constructor(private el: ElementRef){
}
ngOnInit() {
this.originEl = this.el.nativeElement.cloneNode(true);
this.highlightText();
}
private highlightText () {
if (this.search && this.originEl) {
let pattern = this.search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
pattern = pattern.split(' ').filter((t) => {
return t.length > 0;
}).join('|');
const regex = new RegExp(pattern, 'gi');
console.log(this.originEl);
return this.el.nativeElement.innerHTML = this.originEl.innerHTML.replace(regex, (match) => `<strong>${match}</strong>`);
}
}
}
零件
@Component({
selector: 'my-app',
template: `
<div [highlight]="search">
Hello Angular2
</div>
`
})
export class App {
search = 'angu';
constructor() {
// change the search string after 3sec
setTimeout(() => { this.search = 'angular'; }, 3000)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.