angular2 pipe and directive highlightterm is IE11で動作しません。

Question

こんにちは、私は最初のディレクティブを使用し、現在はIE11のブラウザでテストするパイプに切り替えるようにテキストを強調表示する必要があります検索用語をフィルターに達成しようとします。 .kindly angular2 2.2.3

highlight.pipe.tsを使用していますにわたり、このエラーが来ていくつかのいずれかを助けるしかし、コードの下には、クロームで罰金で働いているとFirefoxはなぜIE11でこのエラーをgettting午前わからない：

を

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

のようなエラーを取得しています。私はUbuntuとIEの原因でそれをテストできません。

@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) 
    } 
}