在 angular 中使用 google-diff-match-patch

Question

我想在 angular 应用程序中使用 google diff/match/patch lib 来显示两个文本之间的差异。

我的用法是这样的：

public ContentHtml: SafeHtml;
compare(text1: string, text2: string):void {
        var dmp = new diff_match_patch();

        dmp.Diff_Timeout = 1;
        dmp.Diff_EditCost = 4;

        var d = dmp.diff_main(text1, text2);
        dmp.diff_cleanupSemantic(d);
        var ds = dmp.diff_prettyHtml(d);

        this.ContentHtml = this._sanitizer.bypassSecurityTrustHtml(ds);
}

问题是，如何为这一行导入 diff_match_patch？
var dmp = new diff_match_patch();

Answer 1

您需要为 package.json 中的 angular 项目导入 npm 包。

"diff-match-patch": "^1.0.5",

并将组件导入为：

import { Component } from '@angular/core';
import DiffMatchPatch from 'diff-match-patch';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  getDiff() {
    var dmp = new DiffMatchPatch();
    var diff = dmp.diff_main('Hello', 'Hallo');
    // Result: [(-1, "Hell"), (1, "G"), (0, "o"), (1, "odbye"), (0, " World.")]
    dmp.diff_cleanupSemantic(diff);
    // Result: [(-1, "Hello"), (1, "Goodbye"), (0, " World.")]
    console.log(diff);
  }

}

Here is a demo code

Answer 2

建立在@Shashank 的回答之上——为了确保类型安全，您还可以通过以下方式安装 corresponding type defs：

npm i -D @types/diff-match-patch
or 
yarn add -D @types/diff-match-patch

这些类型定义自 2017 年以来没有太大变化，这意味着您将无法使用

import DiffMatchPatch from 'diff-match-patch';

因为这些类型没有默认导出——它们只导出名称相当糟糕的 diff_match_patch class（看起来像 function) -- 您首先尝试运行！

但是，typescript 还支持 import renaming，您可以使用它导入实例化 class 我们都习惯了：

import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch';

正确导入后，您将能够享受智能感知等功能：

在 angular 中使用 google-diff-match-patch

Using google-diff-match-patch in angular

javascript

typescript

google-diff-match-patch

angular