具有异步操作的angular2-markdown失败

时间:2017-04-27 11:06:00

标签: angular typescript markdown angular-directive

我在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。

failed-screenshot

但是,如果我要做<div Markdown [innerHTML]='article.text'></div>我会从var获得文本但是它会是一个带引号的字符串,其中angular2-markdown会忽略。截图如下。

failed-using-innerHtml

完整项目 - &gt; https://github.com/flamusdiu/micro-blog

1 个答案:

答案 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();
        });
  }
}