typescript 搜索5.ts

Posted 2021-05-20

@Directive({
  selector: '[searchableHighlight]'
})
export class SearchableHighlightDirective {
  constructor(@Optional() private container: SearchableContainerComponent, 
              @Optional() private searchable: SearchableDirective, 
              private sanitizer: DomSanitizer, 
              private host: ElementRef) {
              
    if (!searchable) {
      throw new Error(`Missing [searchable] directive`);
    }
  }

  ngOnInit() {
    this.container.register(this, { highlight: true });
  }

  ngOnDestroy() {
    this.container.unregister(this, { highlight: true });
  }

  get token() {
    return this.searchable.token;
  }

  highlight(token: string, searchTerm: string) {
    this.host.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.resolve(token, searchTerm));
  }

  resolve(token: string, searchTerm: string) {
    ...removed for brevity, you can see it in the full demo
  }
}