如何在angular 7中高亮显示两个string对象中的不同值？

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlightDiff]'
})
export class HighlightDiffDirective implements OnInit {
  @Input('appHighlightDiff') strings: string[];

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    const [str1, str2] = this.strings;
    const diffIndexes = this.getDiffIndexes(str1, str2);

    let highlightedText = '';
    for (let i = 0; i < str1.length; i++) {
      const char = str1[i];
      const isDifferent = diffIndexes.includes(i);
      highlightedText += isDifferent ? `<span class="highlight">${char}</span>` : char;
    }

    this.elementRef.nativeElement.innerHTML = highlightedText;
  }

  private getDiffIndexes(str1: string, str2: string): number[] {
    const diffIndexes = [];
    for (let i = 0; i < str1.length; i++) {
      if (str1[i] !== str2[i]) {
        diffIndexes.push(i);
      }
    }
    return diffIndexes;
  }
}

<div [appHighlightDiff]="['string1', 'string2']"></div>

.highlight {
  background-color: yellow;
}