Question

我需要用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>

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

Mermaid Output

任何人都可以指出我做错了什么吗？我已经提到了以下问题：Simple mermaid graph fails 并且包含了最新的美人鱼文件，但仍未获得输出。

浏览器：Chrome版本61.0.3163.100（官方版本）（64位）
Angular版本：@ angular / cli：1.3.1 node：6.11.2 os：linux x64

提前致谢。

Answer 1

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

Answer 2

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

在我的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>

它按预期工作。

美人鱼库图形没有在angular2中呈现

2 个答案: