angular 使用 gojs 实现异步刷新

痛定思痛。 2023-06-23 02:54 6阅读 0赞

方法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’\]

\})

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() })
      }
    
    }

.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;
    }