美人鱼库图未在 angular2 中呈现答案

【问题标题】：mermaid library graph not getting rendered in angular2美人鱼库图未在 angular2 中呈现
【发布时间】：2018-03-30 18:58:12
【问题描述】：

我需要在 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 节点：6.11.2 操作系统：linux x64

提前致谢。

【问题讨论】：

标签： angular mermaid

【解决方案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});
    }
}

【讨论】：

谢谢@LLai。我根据您的回复进行了尝试，但现在出现以下错误：mermaid.initialize 不是函数。我认为它不承认美人鱼图书馆。有什么意见吗？
@JasjeetKaur 你用的是我贴的组件方法吗？如果是这样，您是否在组件文件的顶部声明了美人鱼declare const mermaid;
是的，我做到了。在页面顶部：declare const mermaid;
@JasjeetKaur 你能确认美人鱼正在正确加载吗？
如何确认？我在 index.html 中包含了该文件的链接：<script src="http://www.sveido.com/mermaid/dist/mermaid.full.js"></script>

【解决方案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>

它按预期工作。

【讨论】：