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

Question

我在 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 始终为空/未定义。

不过，如果我要执行<div Markdown [innerHTML]='article.text'></div>，我会从 var 中获取文本，但它会是 angular2-markdown 忽略的带引号的字符串。截图如下。

完整项目 -> https://github.com/flamusdiu/micro-blog

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