Angular 4是否与Mermaid js兼容？

Question

我正在寻找图Javascript库来为我的有角项目创建某种顶级动态框图。有人可以告诉我美人鱼是否可以与Angular 4兼容吗？也请让我知道是否还有其他好的图表库需要处理。谢谢！

Answer 1

它相当容易使用。

1. 将美人鱼添加到您的项目中： npm i mermaid
2. 在您要使用美人鱼的视图中，导入美人鱼并调用init方法

例：

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

@Component({
    selector: "MermaidTest",
    template: `
        <div class="mermaid">
            graph LR
            A-->B
        </div>`
})
export class MermaidTest implements OnInit {    

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

在这种情况下，您必须转义类似{的字符。如果您还是将图形内容作为字符串，则可以使用mermaidAPI代替：

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

@Component({
    selector: "MermaidTest",
    template: `<div #mermaid></div>`
})
export class MermaidTest implements AfterContentInit {

    @ViewChild("mermaid")
    public mermaidDiv;

    public ngAfterContentInit(): void {
        mermaid.initialize({
            theme: "dark"
        });

        const element: any = this.mermaidDiv.nativeElement;
        const graphDefinition = "graph TB\na-->b";
        mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
            element.innerHTML = svgCode;
        });
    }
}

有关更多详细信息，请参见https://mermaidjs.github.io/#/mermaidAPI