如何在 Angular 中动态呈现降价文件？

Question

我正在尝试使用 ngx-markdown 库编写一个 Angular 组件，将 markdown 文件呈现为网页的一部分。查看库的官方演示，它有一个文件列表，它 requires，然后从中呈现：

来自演示的 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.

我哪里做错了，我将如何编写一个更改 markdown 源并实际工作的方法？

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>

Answer 2

经过大量的试验和错误之后，还有一种方法可以通过 http 调用使用 ngx-markdown 包动态呈现 markdown。

使用httpclient对md文件进行http调用

import { HttpClient } from '@angular/common/http';
import { MarkdownService } from 'ngx-markdown';


    export class AppComponent {
          title = 'personal-blog';
          markdownRaw ='';
          markdown='';
     constructor(private mdService:MarkdownService, private _httpClient:HttpClient){}

          async ngOnInit() {
            this.markdownRaw = await this._httpClient.get(`/assets/hello.md`, {
               responseType: 'text'
            }).toPromise();
        
            this.markdown=this.mdService.compile(this.markdownRaw);
             }
    
         onLoad(data:any){
         console.log(data);
          }
         
          onError(data:any){
           console.log(data);
          }
}

现在在 markdown 指令中使用声明和初始化的变量作为数据属性。

<markdown [data]="markdown" (load)="onLoad($event)" (error)="onError($event)"></markdown>

Answer 3

一般情况下，您可以使用 HTTP 客户端将 md 文件作为字符串加载

async ngOnInit() {
    this.md = await this.http.get(`/assets/posts/1.md`, 
                    { responseType: 'text'}).toPromise();
}

实时编辑器示例

https://stackblitz.com/edit/angular-reading-markdown-in-global-assets?embed=1&file=src/app/app.component.ts

来源

https://fireflysemantics.medium.com/loading-markdown-files-with-the-angular-httpclient-155e31acab68

如何在 Angular 中动态呈现降价文件？

How to dynamically render a markdown file in Angular?

markdown

dynamic

require

typescript

angular