通過http.get觀察角4更新

Question

我想更新從API調用中返回的html中的observable。

我想知道是否有人可以幫助我。

的HTML（另一個部件）

<common-content [theme]="theme" ></common-content> 

和組件是：

​​

所以不是做一個 「替換」 可觀察到的應該只是自動更新。

我試過使用一個訂閱，我也試過了一個承諾，但是我似乎沒有能夠獲得語法的行爲。

任何人都可以幫忙嗎？

在此先感謝

Answer 1

我建議您更新<string> f['_body'];更改爲<string>f.text()，也innerHTML = "{{innerHtml}}"到[innerHTML]="view"反正檢查以下plnkr鏈接，因爲它是做你正在試圖執行

this._http.get(link).subscribe(f => { 
    this.loading = false; 
      var content = <string>f.text(); 
      this.view = content.replace("{{theme.Name}}", this.theme.name); 
      }, (error) => { 
       this.loading = false; 
       console.error(error); 
       alert(error); 
      }); 

的到底是什麼模板是這樣的

content <button (click)="open('external.html')">Open Page</button> 
     <strong *ngIf="loading">LOADING...</strong> 
     <div [innerHTML]="view"></div> 

external.html是s imple如下

me playing around with this theme with name 
<b> 
    {{theme.Name}} 
</b> 

這裏是運行Plnkr

但對於字符串插值處理，如果內容是相同的模板，因爲父加載它，並綁定this到模板的範圍，這是類似角1 NG-包括檢查此answer，因爲它有助於在解決了（而不是重新做的話），並注意這是角4和上述

使用Angular 4.0.0-beta.6's ngComponentOutlet。

Answer 2

1）你想要達到的目標還不清楚。 我可以做的是成功，你想更新dom。 2）不要使用內部html，並使用插值或ngModel與殺菌劑相同。 3）另一種方法是爲同一個創建一個自定義的可重用指令。

方式可能是：

1）使管道的消毒：

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 
/** 
* 
* @export 
* @class SafeHtmlPipe 
* @implements {PipeTransform} 
*/ 
@Pipe({ 
    name: 'safeHtml' 
}) 
export class SafeHtmlPipe implements PipeTransform { 
    /** 
    * 
    * @param {DomSanitizer} sanitizer 
    * @memberof SafeHtmlPipe 
    */ 
    constructor(private sanitizer: DomSanitizer) { } 
    /** 
    * 
    * @param {any} style 
    * @returns 
    * @memberof SafeHtmlPipe 
    */ 
    transform(style) { 
    // return this.sanitizer.bypassSecurityTrustStyle(style); 
    return this.sanitizer.bypassSecurityTrustHtml(style); 
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs 
    } 
} 

2）使用它像：

<div class="card_description" [innerHTML]="scenarioStepDataDesc | safeHtml"></div> 

其中scenarioStepDataDesc是你的HTML內容。

3）使用管道和其它可重用的組件共享模塊/指令

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { MaterialModule } from '../material/material.module'; 
import { BlockUIModule } from 'ng-block-ui'; 
import { AutoCompleteComponent } from './components/autoComplete/autoComplete.component'; 
import { DialogDataComponent } from './components/dialog/dialog.component'; 
import { SafeHtmlPipe } from './pipes/safeHtml.pipe'; 
/** 
* 
* @export 
* @class SharedModule 
*/ 
@NgModule({ 
    imports: [CommonModule, FormsModule, MaterialModule, BlockUIModule, ReactiveFormsModule], 
    exports: [ 
    CommonModule, 
    FormsModule, 
    MaterialModule, 
    BlockUIModule, 
    ReactiveFormsModule, 
    AutoCompleteComponent, 
    DialogDataComponent, 
    SafeHtmlPipe 
    ], 
    declarations: [AutoCompleteComponent, DialogDataComponent, SafeHtmlPipe] 
}) 
export class SharedModule { } 

享受:)