Question

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

最近，我们在应用程序中添加了另一个（非角度）组件，需要dojo.js。我们正在从dojo.js导入index.html，如下所示：

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

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

比较两个呈现的页面，我发现最终DOM中的clr-icon元素不再包含嵌套的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的引入导致名称空间冲突，这会阻止一些＆＃34;插入SVG元素＆＃34;来自运行的代码。

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

Answer 1

您可以尝试使用此处的dojo.js NPM 包：https://www.npmjs.com/package/dojo。

虽然我从未在dojo.js解决方案中使用过vmware-clarity，但我们以这种方式使用了Javascript和dimple.js等其他vis.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() {
    }
}

我希望这会有所帮助。

将dojo.js添加到index.html

1 个答案: