可通過http.get觀察到Angular 4 Update

Question

我正在嘗試更新從API調用以html返回的observable。

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

html（在另一個組件上）

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

該組件是：

import { Component, OnInit, Input } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ThemeModel } from '../../models';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'common-content',
  template: `<div innerHTML = "{{innerHtml}}"></div>`
})

export class CommonContentComponent implements OnInit {
    @Input() page: string;
    @Input() theme: ThemeModel;
    innerHtml: string;

    constructor(private http: Http) {
    }

    ngOnInit() {
        this.populatePage();
    }

    populatePage(){
        let thisUrl = 'myPage.html';
        this.http.get(thisUrl).subscribe(f => {
            var content = <string>f['_body'];
            this.innerHtml = content.replace("{{theme.Name}}", this.theme.name);
            }, (error) => {
                let e = error;
            }, () => {
        });
    }
}

因此，可觀察對象應該執行自動更新，而不是執行“替換”操作。

我嘗試使用訂閱，也嘗試了promise，但是我似乎無法使語法表現出來。

有人可以幫忙嗎？

提前致謝

Answer 1

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>

其中方案StepDataDesc是您的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 { }

請享用 ：）

Answer 2

我建議您更新您的<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很簡單，如下所示

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

這是正在運行的Plnkr

但對於字符串插值處理，如果內容是相同的模板，因為父加載它，並綁定this到模板的范圍，這是類似角1 納克，包括檢查這個答案 ，因為它有助於在解決了（而不是重新做），請注意，這是針對角度4及以上

使用Angular 4.0.0-beta.6的ngComponentOutlet 。