画像またはHTMLを角度4の背景として動的に設定しました

Question

私は角度4で作業しています。私は自分のコンポーネントに背景を動的に設定しようとしています。私の場合、バックグラウンドはImageファイルまたはHtmlファイルです。

私はイメージでそれを行うことができましたが、私はHtmlの部分に問題があります。

私はここにいくつかの助けをいただければ幸いです： まず、私は私のファイルがHTMLであるかどうかを確認したいので、のように：if(background.split('.').pop().toLowerCase() === 'html')

trueの場合は、その後、trueにisHtmlを設定し、http.getの助けを借りて（）コンテンツを読みます私は[innerHtml]に与えたいものです。

私はそれを正しく行うことはできませんが、簡単ですが。助けてくれてありがとう。

HomeBackgroundComponent.ts

export class HomeBackgroundComponent { 
public backgroundPath$: Observable<string>; 
public isHtml = new BehaviorSubject<boolean>(false); 

constructor(public viewContext: ViewContextService, private vlmService: VlmService, private httpService: Http) { 
    viewContext.title = 'Home'; 
    viewContext.id = 'HomeBackgroundComponent'; 

    this.backgroundPath$ = vlmService.background$.map(background => { 
     return '../../../assets/background/' + background; 
    }); 
} 
} 

HomeBackgroundComponent.html：

<div> 
    <img *ngIf="!(isHtml | async)" [src]="backgroundPath$ | async" /> 
    <div *ngIf="(isHtml | async)" [innerHTML]="(backgroundPath$ | async)"></div> 
</div> 

---

更新：私は今、私が達成したいものに少し近づいています、 httpSeでhtmlファイルを読んでいない唯一の事rvice.get（）ここで

vlmService.background$.subscribe(background => { 
     if (background.split('.').pop().toLowerCase() === 'html') { 
      this.isHtml.next(true); 

      this.backgroundPath$ = vlmService.background$.map(bkg => { 
       // TODO: here should be this.httpService.get(the html file) 
       return '<h1>HELLO DEVID</h1>'; 
      }); 

     } else { 
      this.isHtml.next(false); 

      this.backgroundPath$ = vlmService.background$.map(bkg => { 
       return '../../../assets/background/' + bkg; 
      }); 
     } 
    }); 

Answer 1

は最終的なソリューションです：

export class HomeBackgroundComponent { 
public backgroundPath$: Observable<string>; 
public isHtml$ = new Observable<boolean>(); 
public htmlFile$ = new Observable<string>(); 

constructor(public viewContext: ViewContextService, private vlmService: VlmService, private http: Http) { 
    viewContext.title = 'Home'; 
    viewContext.id = 'HomeBackgroundComponent'; 

    this.backgroundPath$ = vlmService.background$.map(background => { 
     return '../../../assets/customize/' + background; 
    }); 

    this.isHtml$ = this.backgroundPath$.map(path => path.endsWith('.html')); 

    this.htmlFile$ = this.backgroundPath$ 
     .filter(path => path.endsWith('.html')) 
     .switchMap(path => { 
      return this.http.get(path).map(response => response.text()); 
     }); 
} 
}