angular2管道和指令highlightterm不工作在IE11

Question

您好我試圖實現過濾搜索詞它應該突出顯示文本，所以我使用第一個指令，現在切換到管道在IE11瀏覽器下面測試是代碼。 但下面的代碼是工作在罰款Chrome和Firefox我不知道爲什麼我流汗在IE11此錯誤.kindly幫助使用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) 

Answer 1

正如我不能看到什麼是你嘗試用指令，這裏是我的解決方案。我無法在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) 
    } 
}