0

我对 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>

我希望你能帮我解决这个问题，因为我真的不明白为什么它没有启动任何东西。

4

1 回答 1

1

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

@ViewChild('mermaid', { static: true }) mermaid: ElementRef;

并像这样添加#mermaid到您的 div 中：

<div #mermaid class="mermaid">
</div>

添加#mermaid是创建一个名为“美人鱼”的模板变量，并允许您在打字稿中获取对本机元素的引用。

我的想法是该元素在 ngOnInit() 中不可用，但请尝试自己添加console.log(this.mermaid.nativeElement);到 ngOnInit() 以查看它是否可用（已添加到 DOM）。

相反，尝试在您的内容上实现 AfterContentInit，并将您当前在 ngOnInit() 中的代码移动到 ngAfterContentInit()。

于 2020-02-10T19:26:06.370 回答