非同期操作でangular2-markdownが失敗する

Question

Angular 4.xアプリケーションでangular2-markdownを使用しています。 angular2-値下げのドキュメントによると

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

、私はマークダウンをフィルタリングするために使用するいくつかのオプションがあります：

<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> 

コンポーネントは次のようにセットアップされる：

私は、コンポーネントを持っています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-値下げ無視することに引用符で囲まれた文字列になります。以下のスクリーンショット。

全プロジェクト - >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(); 
     }); 
    } 
}