Angular 中的美人鱼整合问题

Question

我对 Mermaid 的集成有疑问，因为尽管检查了文档并且其他人在 Whosebug 和其他论坛中要求这个库，但他们给出的示例也是启动这样一个项目。

组件 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

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

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

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

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

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

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

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

Angular 中的美人鱼整合问题

Problems with Mermaid integration in Angular

node.js

npm

mermaid

angular