Как динамически визуализировать файл уценки в Angular? - PullRequest
1 голос
/ 04 июня 2019

Я пытаюсь написать компонент Angular, который отображает файлы уценки как часть веб-страницы, используя библиотеку ngx-markdown. Глядя на официальную демонстрацию библиотеки, у нее есть список файлов, которые она require s, которые затем отображаются:

Из демоверсии app.component.ts:

  blockquotes = require('raw-loader!./markdown/blockquotes.md');
  codeAndSynthaxHighlighting = require('raw-loader!./markdown/code-and-synthax-highlighting.md');
  emphasis = require('raw-loader!./markdown/emphasis.md');
  headers = require('raw-loader!./markdown/headers.md');
  horizontalRule = require('raw-loader!./markdown/horizontal-rule.md');
  images = require('raw-loader!./markdown/images.md');
  links = require('raw-loader!./markdown/links.md');
  lists = require('raw-loader!./markdown/lists.md');
  listsDot = require('raw-loader!./markdown/lists-dot.md');
  tables = require('raw-loader!./markdown/tables.md');

И из демоверсии app.component.html:

<code><!-- HEADER -->
<section id="headers">
<h2 class="subtitle">Headers</h2>

<pre>{{ headers }}
{{headers}}

Есть другие разделы, которые читают из других require s, но синтаксис тот же.

Я пытаюсь создать метод, который изменяет, из какого файла читается тег <markdown>. Вот что у меня есть:

  // Markdown variable.
  markdown;

  ngOnInit() {
    this.setMarkdown('home.md');
  }

  setMarkdown(file: string) {
    const path = 'raw-loader!./assets/markdown/' + file;
    this.markdown = require(path);
  }

Я явно что-то делаю не так, так как получаю ошибку компилятора:

ERROR in src/app/app.component.ts(24,21): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

Что я делаю не так, и как мне написать метод, который изменяет источник уценки и фактически работает?

1 Ответ

1 голос
/ 04 июня 2019

Основываясь на документации https://www.npmjs.com/package/ngx-markdown#directive, вы можете загрузить файл через [src]:

<!-- loaded from remote url -->
<div markdown [src]="'path/to/file.md'" (load)="onLoad($event)" (error)="onError($event)"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...