通过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 { } 

享受:)