Ng-code-diff NPM

ng-code-diff

此组件是基于vue-code-diff实现的Angular版本代码对比展示工具。

安装

npm

npm install ng-code-diff

yarn

yarn add ng-code-diff

使用

app.module.ts

import { NgCodeDiffModule } from 'ng-code-diff';
...
imports: [
  NgCodeDiffModule
]

Typescript

import { Component } from '@angular/core';
import newStr from './data/newStr';
import oldStr from './data/oldStr';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newStr = newStr;
  oldStr = oldStr;
  context = 5;
  outputFormat = 'side-by-side';
}

HTML

<div>
  <ng-code-diff [newStr]="newStr" [oldStr]="oldStr" [context]="context" [outputFormat]="outputFormat"></ng-code-diff>
</div>

.angular.json - Add styles

"node_modules/diff2html/dist/diff2html.css"

index.html

<script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
    env: { DEBUG: undefined },
    version: []
    };
</script>

参数说明

参数	说明	类型	可选值	默认值
newStr	新的字符串	string	—	—
oldStr	旧的字符串	string	—	—
context	不同地方上下间隔多少行不隐藏	number	—	—
outputFormat	展示的方式	string	line-by-line，side-by-side	line-by-line