ng-code-diff

Angular版本代码对比工具

Usage no npm install needed!

<script type="module">
  import ngCodeDiff from 'https://cdn.skypack.dev/ng-code-diff';
</script>

README

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

效果展示

LICENSE

MIT