角度4更新http.get経由で観察可能

Question

私は、API呼び出しからhtmlで返されるobservableを更新しようとしています。

誰かが私を助けてくれるのだろうかと思います。

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

（別のコンポーネント上の）HTMLおよびコンポーネントは次のとおりです。

​​

ので、代わりの観察可能なだけで自動的に更新する必要があり、 "置き換える" こと。

私はサブスクリプションを使用しようとしましたが、私も約束を試みましたが、動作するように構文を取得できないようです。

誰でも手助けできますか？事前

Answer 1

で

おかげで私はあなたが<string>f.text()にご<string> f['_body'];変更を更新示唆し、またinnerHTML = "{{innerHtml}}"[innerHTML]="view"に、あなたが

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

実行しようとしている正確に何をやっていると、とにかく下のplnkrリンクをチェックテンプレートはこのようです

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

external.htmlはですコンテンツは、親ロードそれと同じテンプレートにあったとに似ているテンプレートスコープにthisをバインドするかのように、ここで

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

以下のよう

が、文字列の補間処理のためにPlnkrを実行しているimple 1角度NG-含まれ、それは（それをやって代わりのRe）が解決するのに役立ち、そしてこれは注意してチェックこのanswerのため角度4と上記

を使用して、角4.0.0~β.6のngComponentOutletを使用します。

Answer 2

1）達成したいことは明確ではありません。 私が作ることができるのは、domを更新したい場合です。 2）内部htmlを使用しないで、サニタイザで補間やngModelを使用しないでください。 3）もう1つのアプローチは、同じものに対して独自の再使用可能なディレクティブを作成することです。

アプローチは次のようになります。

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

が:)