0

我们有一个使用Clarity 的 Tree View的工作 Angular 4 应用程序。我们对这个控件非常满意，我们希望继续使用它。

最近，我们在需要dojo.js. 我们是这样导入dojo.js的index.html：

<script type="text/javascript" language="javascript" src="/dojo/dojo/dojo.js"></script>

唉，添加此导入后，可展开树节点上的展开/折叠箭头/插入符号图像不再出现。

比较两个渲染页面，我发现clr-icon最终 DOM 中的元素不再包含嵌套svg元素。缺少的svg元素看起来像这样（我用省略号替换了一些文本）：

<clr-icon ...>
<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="..." xmlns:xlink="..." focusable="false" role="img">
  <title>angle</title>
  <path class="clr-i-outline clr-i-outline-path-1" d="..."></path>
</svg>
</clr-icon>

我目前的假设是，引入dojo.js会导致命名空间冲突，从而阻止一些“插入 SVG 元素”代码运行。

如何在继续dojo.js从 index.html 导入的同时恢复 SVG 元素？

4

1 回答 1

0

您可以尝试从这里使用dojo.js NPM包：https ://www.npmjs.com/package/dojo 。

尽管我从未使用dojo.js过我们的解决方案，vmware-clarity但我们以这种方式使用了其他Javascript库。dimple.jsvis.js

在package.json中，添加依赖项。

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    ...
    "dimple-js": "^2.1.4",
    "vis": "^4.20.1",
    ...
  },

这将安装节点模块。

以下是我们如何使用vis.js.

import {Component, Input, OnChanges, OnDestroy, OnInit, Output,EventEmitter, SimpleChanges} from "@angular/core";
import {DataSet, Edge, IdType, Network, Node} from "vis";

@Component({
...
})

export class DemoComponent implements OnInit, OnChanges, OnDestroy {

...

    ngOnInit() {
        this.onRefresh();
    }

    onRefresh(){
        ...
        var container = document.getElementById('network');
        var data = {
             nodes: this.nodes,
             edges: this.edges
        };
        var options = {
             width: '1000px',
             height: '450px',
             ...
        };

        this.network = new Network(container, data, options);
        var initPosition = {
            scale : 0.8
        };

        this.network.moveTo(initPosition);
    }

    ngOnChanges(changes: SimpleChanges) {
         if(...){
              this.onRefresh();
         }
    }

    ngOnDestroy() {
    }
}

我希望这有帮助。

于 2018-01-19T06:16:14.063 回答