Question

我对Mermaid的集成存在问题，因为尽管已经检查了文档，并且其他人在stackoverflow和其他论坛中都要求这个库，但他们举的例子也是如此。

组件TS

import { Component, OnInit } from "@angular/core";
import * as mermaid from "mermaid";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "testMermaid";

  public ngOnInit(): void {
    mermaid.initialize({
      theme: "forest"
    });
  }
}

HTML

<div class="mermaid">
  graph TD A[Hard] 
  -->|Text| B(Round) B 
  --> C{Decision} C 
  -->|One| D[Result 1] C
  -->|Two| E[Result 2]
</div>

我希望您能为我解决这个问题，因为我真的不明白为什么它什么也没开始。

Answer 1

尝试将以下内容添加到您的组件中。

function calculateTimeDifference() {
    var date1 = new Date();
    var date2 = new Date();

    var diff = date2.getTime() - date1.getTime();

    var msec = diff;
    var hh = `0${Math.floor(msec / 1000 / 60 / 60)}`;
    msec -= hh * 1000 * 60 * 60;

    var mm = `0${Math.floor(msec / 1000 / 60)}`;
    msec -= mm * 1000 * 60;

    var ss = `0${Math.floor(msec / 1000)}`;
    msec -= ss * 1000;

    return hh.slice(-2) + ":" + mm.slice(-2) + ":" + ss.slice(-2); 
}

像这样将@ViewChild('mermaid', { static: true }) mermaid: ElementRef;添加到您的div中：

#mermaid

添加<div #mermaid class="mermaid"> </div>将创建一个名为“美人鱼”的模板变量，并允许您获取对打字稿中本机元素的引用。

我的暗示是该元素在ngOnInit（）中将不可用，但是请通过在ngOnInit（）中添加#mermaid来尝试一下该元素是否可用（已添加到DOM中）。

相反，尝试在您的内容上实现AfterContentInit，然后将当前在ngOnInit（）中拥有的代码移到ngAfterContentInit（）。

Angular中的美人鱼集成问题

1 个答案: