angular 使用 gojs 实现异步刷新

方法1：

在需要用到插件的ts文件中添加如下引用

其中 ‘./config/gojs/go.js’ 是存放你修改后的go.js路径(为了去水印)

不需要在module里面添加任何东西，也不需要在.angular-cli.json或index.html 配置，这个方法是最简单快捷的。

import { Component , OnInit } from ‘@angular/core’;

import * as go from ‘./config/gojs/go.js’;

@Component ({

selector: ‘app-gojs-demo’,

templateUrl:’./gojs-demo.component.html’,

styleUrls: [’./gojs-demo.component.scss’]

})

扫描二维码关注公众号，回复： 9299252 查看本文章

export class GoJSDemoComponent implements OnInit {

ngOnInit(){

this.myGoJS();

}

constructor() {}

myGoJS(){

}

}

其他方法:

方法2：在.angular-cli.json文件中配置

步骤：

1.在项目根目录.angular-cli.json文件中找到script字段，在数组中添加要引用的所有js文件（注意先后顺序）

“scripts”: [“assets/jquery-3.2.1.js”,“assets/jquery.nicescroll.js”,“assets/ion.rangeSlider.js”],

2.在需要用该插件的组件中（.ts文件中）做如下声明：declare var $:any;
目的是不让编译时报错

3.接下来在ngOnInit方法中就能正常用上面的三款插件了。
方法3：在index.html页面上引用插件

步骤：

1.在根目录的index.html页面中添加如下引用：

2.在需要用该插件的组件中（.ts文件中）做如下声明：declare var $:any;
目的是不让编译时报错

3.接下来在ngOnInit方法中就能正常用上面的三款插件了
方法4: 使用npm 安装这个是最常规的方法

步骤: 这个官网有就不说了。执行命令 npm install gojs

goj\diagram-editor.component.ts

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, AfterContentInit } from '@angular/core';
import * as go from 'gojs';
import { Observable } from 'rxjs/observable';
import { catchError, map, tap } from 'rxjs/operators';
import { interval } from 'rxjs/observable/interval';
import { passBoolean } from 'protractor/built/util';
import { RootComponent } from "../../../shared/component/root.component";



@Component({
  selector: 'app-diagram-editor',
  templateUrl: './diagram-editor.component.html',
  styleUrls: ['./diagram-editor.component.scss']
})
export class GojComponent extends RootComponent implements OnInit {
  private diagram: go.Diagram = new go.Diagram();
  private palette: go.Palette = new go.Palette();


  @ViewChild('diagramDiv')
  private diagramRef: ElementRef;

  @ViewChild('paletteDiv')
  private paletteRef: ElementRef;
  @Input()
  initDiagramData:string;
  @Input()
  get model(): go.Model { return this.diagram.model; }
  set model(val: go.Model) { this.diagram.model = val; }
  @Output()
  nodeSelected = new EventEmitter<go.Node | null>();
  @Output()
  saveDiagramData = new EventEmitter<any>();

  @Output()
  modelChanged = new EventEmitter<go.ChangedEvent>();

  constructor() {
    super();
    const $ = go.GraphObject.make;
    this.diagram = new go.Diagram();
      this.diagram.initialContentAlignment = go.Spot.Center;
      this.diagram.allowDrop = true;  // necessary for dragging from Palette
      this.diagram.undoManager.isEnabled = true;
      this.diagram.allowZoom= true    
      this.diagram.isReadOnly= false
      this.diagram.addDiagramListener("ChangedSelection",
        e => {
          const node = e.diagram.selection.first();
          this.nodeSelected.emit(node instanceof go.Node ? node : null);
        });
      this.diagram.addModelChangedListener(e => e.isTransactionFinished && this.modelChanged.emit(e));
   this. diagram.grid.visible = true;
    this.diagram.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape,
          {
            fill: "lightblue", strokeWidth: 0,
            portId: "", cursor: "pointer",
            // allow many kinds of links
            fromLinkable: true, toLinkable: true,
            fromLinkableSelfNode: true, toLinkableSelfNode: true,
            fromLinkableDuplicates: true, toLinkableDuplicates: true
          },
          new go.Binding("fill", "color")),
          $(go.Panel,
          $(go.Picture, { source: "../assets/images/panda.png"},
          new go.Binding("source"),new go.Binding("visible"))),

        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay()),
          );

    this.diagram.linkTemplate =
      $(go.Link,
        // allow relinking
        { relinkableFrom: true, relinkableTo: true },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    this.palette = new go.Palette();
    this.palette.nodeTemplateMap = this.diagram.nodeTemplateMap;

    this.palette.model.nodeDataArray =
      [
        { text: "Start", color: "lightblue",},
        { text: "Beta", color: "orange" ,},
        { text: "Conditional", color: "lightgreen" },
        { text: "Delta", color: "pink" },
        { text: "Epsilon", color: "yellow" }
      ];
  }

  ngOnInit() {
    this.diagram.div = this.diagramRef.nativeElement;
    this.palette.div = this.paletteRef.nativeElement;
    this.createModel(this.initDiagramData)
  }

  createModel(data:string): void {
    this.model = go.Model.fromJson(data);

  }
  onSave(): void {
    this.saveDiagramData.emit({ saveDiagramData: this.model.toJson() })
  }

}

<div class="diagramsPanel">
    <button class="btn btn-primary" (click)="onSave()">保存数据</button>
  <div #paletteDiv class="paletteDiv"  ></div>
  <div #diagramDiv class="diagramDiv" ></div>
</div>

.paletteDiv ,.diagramDiv{
    width:100%;
    height:800px;
}
.paletteDiv{
    height:50px;
    width:500px;
    background-color:rgba(205, 187, 223, 0.822);
    margin:auto
}

.diagramDiv{
    background-color:#5c6885;
    border:1px solid red;
}