Question

我正在尝试使用ngx-markdown库编写一个Angular组件，该组件将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：

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

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

<markdown>{{ headers }}</markdown>
</section>

还有其他部分可以从其他require中读取，但是语法是相同的。

我想做的是拥有一个更改<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.

我在做什么错了，我该如何写一种方法来改变降价来源并切实可行？

Answer 1

根据文档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>

如何在Angular中动态渲染markdown文件？

1 个答案: