0

我需要在 angular2 中的一个组件中表示一个带有节点和边的简单图。我尝试了以下方法：

在 index.html 中：

 <script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.min.js"></script>
 <link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.css">

在 transfer.component.html 中：

<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
  mermaid editor

  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

</div>

但是图表没有被渲染。我得到以下输出：

美人鱼输出

谁能指出我做错了什么？我已经提到了以下问题：Simple mermaid graph failed and has included the latest mermaid files，但仍然没有得到输出。

  • 浏览器：Chrome 版本 61.0.3163.100（官方版本）（64 位）
  • 角度版本：@angular/cli：1.3.1 节点：6.11.2 操作系统：linux x64

提前致谢。

4

2 回答 2

0

这就是我所做的，对我来说效果很好......

在我的 Index.html 中添加以下代码行

<script src="./assets/js/mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

在我的组件 HTML 文件中，我只是添加了这样的语句来显示图形

<div class="mermaid">
  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
</div>

它按预期工作。

于 2018-03-30T10:58:12.030 回答
0

Angular 清理 html 模板中的脚本标签。您需要添加<script>mermaid.initialize({startOnLoad:true});</script>到您的 index.html 或您的打字稿中的某处。例如，您可以将其添加到您的 transfer.component 的 ngOnInit 生命周期中

// transfer.component.ts
declare const mermaid;

export class TransferComponent implements OnInit {
    ngOnInit(){
        mermaid.initialize({startOnLoad:true});
    }
}
于 2017-11-28T14:24:21.303 回答