angular - Angular 4 与美人鱼 js 兼容吗？

Question

我正在寻找图表 Javascript 库来为我的 Angular 项目创建某种顶级动态框图。谁能告诉我美人鱼是否与 Angular 4 兼容？另外请让我知道是否还有其他好的图表库可供使用。谢谢！

Answer 1

它很容易使用。

1. 将美人鱼添加到您的项目中：npm i mermaid
2. 在要使用mermaid的视图中，导入mermaid并调用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