Angular 8 挂载 Mergely + ng-alain

官网

1. mergely
2. ng-alaint

原文使用组件
Angular 6.1.1 + mergely
参考项目 Angular 6.1 example of mergelyr
克隆地址 https://github.com/wickedest/mergely-angular

所需物品

1.node.js
2.vsCode
3.npm
(这里就不贴如何安装的了）

执行步骤

1. 克隆代码

git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
yarn
npm start

2. vsCode打开 my-project 在根目录打开文件

   1. tsconfig.app.json
   2. package.json
   3. angular.json
   4. /src/typings.d.ts
   5. /src/app/routes/routes-routing.module.ts

3. tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]    //<---- 更改为 "types": ["jquery "]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

4. package.json

ctrl+F 搜索 dependencies
在最后增加

"@angular/http": "^6.1.0",
"codemirror": "^5.32.0",
"core-js": "^2.5.4",
"jquery": "^3.2.1",
"mergely": "^4.0.6"

ctrl+F 搜索 devDependencies
在最后增加

"@types/jquery": "^3.3.5"

5. angular.json

搜索

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {

在option标签下的

        "styles": [
        ......
          "node_modules/codemirror/lib/codemirror.css",
          "node_modules/mergely/lib/mergely.css",
        ],

        "scripts": [
        ......
          "node_modules/jquery/dist/jquery.js",
          "node_modules/codemirror/lib/codemirror.js",
          "node_modules/mergely/lib/mergely.js"
        ]

6. /src/typings.d.ts

interface JQuery {
    mergely(options?: any) : any;
 }

插入在最后面

7. /src/app/routes/routes-routing.module.ts

import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [
  ......,
    BrowserModule,
    ]

创建新的模块

ng g ng-alain:module mergely
ng g ng-alain:list mergelyScreen -m=mergely

mergelyScreen .ts

  ngOnInit() {
    jQuery(document).ready(() => {
      jQuery('#mergely').mergely({
        lhs: setValue => {
          setValue('the quick red fox\njumped over the hairy dog');
        },
        rhs: setValue => {
          setValue('the quick brown fox\njumped over the lazy dog');
        },
      });
    });
  }

mergelyScreen .html

<div>
  <div class="app mergely-full-screen-8">
    <div class=" mergely-resizer">
      <div id="mergely"></div>
    </div>
  </div>
</div>