Проблемы с интеграцией русалки в Angular - PullRequest
Новая
       19

Проблемы с интеграцией русалки в Angular

0 голосов
/ 10 февраля 2020

У меня проблема с интеграцией 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>

Я надеюсь, что вы можете помочь мне с этой проблемой, так как я действительно не понимаю, почему ничего не начинается.

1 Ответ

1 голос
/ 10 февраля 2020

Попробуйте добавить следующее к вашему компоненту. 

@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 () .

...