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，降價的文檔，我有幾個選項用於過濾降價到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-降價忽略。下面的截圖。

全部項目 - >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(); 
     }); 
    } 
}