angular2 pipe and directive highlightterm is IE11에서 작동하지 않습니다.

Question

안녕하세요. 첫 번째 지시문을 사용하고 이제는 IE11 브라우저에서 테스트 할 파이프로 전환되도록 텍스트를 강조 표시해야하는 검색어를 필터링하려고합니다. .kindly angular2 2.2.3

highlight.pipe.ts을 사용하고 이상이 오류를 앞으로 어떤 일을하는 데 도움 그러나 코드 아래는 크롬에서 잘에서 작동하고 파이어 폭스는 왜 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) 
    } 
}