angular2管道和指示灯在IE11中不起作用

您好，我正在尝试实现过滤搜索词，它应该突出显示文本，所以我使用了第一个指令，现在切换到pipe在IE11浏览器中进行测试。下面是代码。但下面的代码在chrome和firefox中运行良好。我不确定为什么在IE11中出现此错误。。请帮助一些人克服我使用的此错误角度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;
    }
  }
} 

---

由于我看不出您在指令中尝试了什么，下面是我的解决方案。我不能在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>`);
    }
  }
}

@指令({
选择器：“[突出显示]”
})
类WrapBold实现OnInit{
@输入（'突出显示'）
公共集搜索（val:string）{
这个。_search=val；
this.highlightText（）；
}
公共获取搜索（）：字符串{
返回此。\u搜索；
}
私人原创：HTMLElement；
构造函数（专用el:ElementRef）{
}
恩戈尼尼特（）{
this.originEl=this.el.nativeElement.cloneNode（true）；
this.highlightText（）；
}
专用highlightText（）{
if（this.search&&this.originEl）{
让pattern=this.search.replace（/[\-\[\]\/\{\}（\）\*\+\？\.\\\\^\$\\\\；]/g，\\$&'）；
模式=模式。分割（“”）。过滤器（（t）=>{
返回t.length>0；
}).加入（“|”）；
const regex=new RegExp（模式'gi'）；
console.log（this.originEl）；
返回this.el.nativeElement.innerHTML=this.originEl.innerHTML.replace（regex，（match）=>`${match}`）；
}
}
}

组成部分

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

@组件({
选择器：“我的应用程序”，
模板：`
你好，安格拉尔
`
})
导出类应用程序{
搜索='angu'；
构造函数（）{
//在3sec之后更改搜索字符串
setTimeout（（）=>{this.search='angular'；}，3000）
}
}

由于我看不出您在指令中尝试了什么，下面是我的解决方案。我不能在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>`);
    }
  }
}

@指令({
选择器：“[突出显示]”
})
类WrapBold实现OnInit{
@输入（'突出显示'）
公共集搜索（val:string）{
这个。_search=val；
this.highlightText（）；
}
公共获取搜索（）：字符串{
返回此。\u搜索；
}
私人原创：HTMLElement；
构造函数（专用el:ElementRef）{
}
恩戈尼尼特（）{
this.originEl=this.el.nativeElement.cloneNode（true）；
this.highlightText（）；
}
专用highlightText（）{
if（this.search&&this.originEl）{
让pattern=this.search.replace（/[\-\[\]\/\{\}（\）\*\+\？\.\\\\^\$\\\\；]/g，\\$&'）；
模式=模式。分割（“”）。过滤器（（t）=>{
返回t.length>0；
}).加入（“|”）；
const regex=new RegExp（模式'gi'）；
console.log（this.originEl）；
返回this.el.nativeElement.innerHTML=this.originEl.innerHTML.replace（regex，（match）=>`${match}`）；
}
}
}

组成部分

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

@组件({
选择器：“我的应用程序”，
模板：`
你好，安格拉尔
`
})
导出类应用程序{
搜索='angu'；
构造函数（）{
//在3sec之后更改搜索字符串
setTimeout（（）=>{this.search='angular'；}，3000）
}
}

Check here@YordanNikolov我看到了链接是否有解决方法？Check here@YordanNikolov我看到了链接是否有解决方法？我认为错误是由于我们将一些自定义指令或管道绑定到dom元素，还是我错了？我希望你错了；]]。。。您对此进行了测试吗？我认为错误是由于我们将某个自定义指令或管道绑定到dom元素，还是我错了？我希望您错了；]]]。。。你测试过这个吗？

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