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

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>

但是图形并没有呈现出来。我得到以下输出：

美人鱼输出

有人能指出我做错了什么吗？我已经提到了以下问题：简单美人鱼图失败，并包含了最新的美人鱼文件，但仍然没有得到输出。

• 浏览器: Chrome版本61.0.3163.100 (官方版本)(64位)
• 角版本：@ar角/cli: 1.3.1节点: 6.11.2 os: linux x64

提前谢谢。

Answer 1

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

// 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>

它正在如预期的那样运作。