我在Angular 4.x应用程序中使用angular2-markdown。
我有组件:
<div class="content" mat-padding>
<md-card class="mat-elevation-z2" mat-whiteframe="8">
<div class="cover-wrapper">
<img md-card-image src="{{ article?.cover }}">
</div>
<md-card-title fxFlex="100%">
<span>{{ article.title }}</span>
</md-card-title>
<md-card-content>
<markdown [data]="article.text"></markdown>
</md-card-content>
</md-card>
</div>
组件设置如下:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Article } from '../../models/article';
import { ArticleStore } from '../../state/ArticleStore';
import { InterModuleService } from '../../service/inter-module.service';
@Component({
selector: 'app-article-detail',
templateUrl: './article-detail.component.html',
styleUrls: ['./article-detail.component.css']
})
export class ArticleDetailComponent implements OnInit {
private article: Article;
constructor( private route: ActivatedRoute,
private articleStore: ArticleStore,
private interModuleService: InterModuleService ) { }
ngOnInit(): void {
this.interModuleService.article
.subscribe((data) => {
this.article = data;
Promise.all(Object.keys(this.article['attachments']).map((at) => {
return this.articleStore.getAttachment(this.article['id'],at).then ((res) => {
this.article.attachments[at]['data'] = res.toString();
})
})).then(()=> {
this.interModuleService.sidenavToc.nativeElement['innerHTML'] = this.article.attachments['toc'].data;
});
});
this.route.data
.subscribe((data: { article: Article } ) => {
this.interModuleService.article.next(data.article);
this.interModuleService.article.complete();
});
}
}
根据angular2-markdown的文档,我有几个选项可用于将Markdown过滤为HTML:
<div Markdown>
### your markdown code
</div>
<!-- or use angular component -->
<markdown>
### your markdown code
</markdown>
<!-- to load from remote URL -->
<div Markdown path="/path/to/readme.md"></div>
<!-- load remote source code with auto syntax highlighting -->
<markdown path="/path/to/code.cpp"></markdown>
<markdown path="/path/to/code.java"></markdown>
<!-- load remote source code from url stored in variable
(see additional details about variable binding in the next section) -->
<markdown [path]="urlVariable"></markdown>
然而,没有任何工作。通常,article.text
始终为null / undefined。
但是,如果我要做<div Markdown [innerHTML]='article.text'></div>
我会从var获得文本但是它会是一个带引号的字符串,其中angular2-markdown会忽略。截图如下。
完整项目 - &gt; https://github.com/flamusdiu/micro-blog
答案 0 :(得分:1)
在查看源代码之后,我意识到我可以直接调用该服务并直接返回HTML。
这是更新的组件:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MarkdownService } from 'angular2-markdown';
import { Article } from '../../models/article';
import { ArticleStore } from '../../state/ArticleStore';
import { InterModuleService } from '../../service/inter-module.service';
@Component({
selector: 'app-article-detail',
templateUrl: './article-detail.component.html',
styleUrls: ['./article-detail.component.css']
})
export class ArticleDetailComponent implements OnInit {
private _cover: string;
private _text: string;
private _toc: string;
private _title: string;
constructor( private route: ActivatedRoute,
private articleStore: ArticleStore,
private interModuleService: InterModuleService,
private mdService: MarkdownService ) { }
ngOnInit(): void {
this.interModuleService.article
.subscribe((data) => {
let article: Article = data;
this._cover = article.cover;
this._title = article.title;
Promise.all(Object.keys(article['attachments']).map((at) => {
return this.articleStore.getAttachment(article['id'],at).then ((res) => {
article.attachments[at]['data'] = res.toString();
})
})).then(()=> {
this._text = this.mdService.compile(article.text);
this._toc = this.mdService.compile(article.toc)
this.interModuleService.sidenavToc.nativeElement['innerHTML'] = this._toc;
});
});
this.route.data
.subscribe((data: { article: Article } ) => {
this.interModuleService.article.next(data.article);
this.interModuleService.article.complete();
});
}
}