我正在尝试使用
ngx-markdown
库编写一个 Angular 组件,将 Markdown 文件呈现为网页的一部分。查看该库的官方演示,它有一个 require
的文件列表,然后从以下位置渲染这些文件:
来自演示的
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 源代码并真正起作用的方法?
基于文档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>
经过大量的试验和错误,还有一种通过 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>
一般来说,您可以使用 HTTP 客户端将 md 文件作为字符串加载
async ngOnInit() {
this.md = await this.http.get(`/assets/posts/1.md`,
{ responseType: 'text'}).toPromise();
}
实时编辑器示例
来源
https://fireflysemantics.medium.com/loading-markdown-files-with-the-angular-httpclient-155e31acab68