angular2 管道和指令 highlightterm 在 IE11 中不起作用

Question

嗨，我尝试实现过滤搜索词，它应该突出显示文本，所以我使用了第一个指令，现在切换到管道以在 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)

Answer 1

由于我看不到您对 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)
  }
}