使用Angular 2從C＃/ .NET服務返回HTML

Question

我有一個現有的.NET應用程序，我想更新它以使用Angular 2前端。還有是具有動態內容，我想獲得最先進的最新內容，每次一個頁面的部分，我目前使用jquery與此類似：

$.get("/Plan/Variety/VarietyList") 
      .done(function (data) { 
       PlaceReturnedData($("body"), data, "variety-list-selling"); 
      }); 

返回的數據是準確的HTML我需要，不需要操縱它。

如何使用Angular 2來返回相同的數據？我環顧四周，只看到如何處理JSON數據，如英雄教程的角2的巡迴下面的例子：

heroes.component.ts：

heroes: Hero[]; 
selectedHero: Hero; 

constructor(
    private router: Router, 
    private heroService: HeroService 
) { } 

getHeroes(): void { 
    this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
} 

ngOnInit(): void { 
    console.log('initializing MenuVarietiesComponent'); 
    this.getHeroes(); 
} 

hero.service .TS

@Injectable() 
export class HeroService { 
    private heroesUrl = 'app/heroes'; // URL to web api 
    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http){ } 

    getHeroes(): Promise<Hero[]> { 
     return this.http.get(this.heroesUrl) 
        .toPromise() 
        .then(response => response.json().data as Hero[]) 
        .catch(this.handleError); 
    } 
} 

heroes.component.html：

<ul class="heroes"> 
    <!-- On click, execute onSelect() function and pass in the hero variable from the ngFor. Apply the "selected" class if hero & selectedHero match, remove it if they don't --> 
    <li *ngFor="let hero of heroes" 
     (click)="onSelect(hero)" 
     [class.selected]="hero === selectedHero"> 
     <span class="badge">{{hero.id}}</span> 
     <span>{{hero.name}}</span> 
     <!-- We need to stop propagation so we don't trigger the onSelect() method on the <li> --> 
     <button class="delete" (click)="delete(hero); $event.stopPropagation()">x</button> 
    </li> 
</ul> 

如何修改上面的示例Angular 2代碼來處理HTML數據而不是JSON數據，以便我可以利用我已經在C＃端設置的代碼？我猜在HTML中的*ngFor是無關緊要的，因爲我可能不需要將我的數據保存爲一個數組，我可能需要將heroesUrl的值更改爲/Plan/Variety/VarietyList，但之後我稍微卡住了。

編輯： 這裏是我的控制器返回的HTML可能看起來像：

<div class="varietyTypeName" data-toggle="collapse" data-target="" aria-expanded="true" aria-controls=""> 
     Greens 
     <i class="fa fa-angle-down arrow-toggle"></i> 
    </div> 
    <div class="collapse in collapsableArea"> 
     <div class="varietyFamilyName">Arugula</div>    
     <div class="varietyName"> 
      <a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/5409">Astro</a> 
      <a href="#deleteVarietySelling" id="deleteVarietySelling_5409" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal"> 
       <i class="fa fa-minus"></i> 
      </a> 
     </div> 
    </div> 
    <div class="collapse in collapsableArea"> 
     <div class="varietyFamilyName">Kale</div>     
     <div class="varietyName"> 
      <a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/3720">Kalettes</a> 
      <a href="#deleteVarietySelling" id="deleteVarietySelling_3720" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal"> 
       <i class="fa fa-minus"></i> 
      </a> 
     </div> 
    </div> 

Answer 1

你需要做的是這樣的：

import {Component, OnInit} from '@angular/core'; 
import {DomSanitizationService} from "@angular/platform-browser"; 

export class SideBarComponent implements OnInit { 
    myHTML; 

    constructor(private sanitizer: DomSanitizationService, private myService : MyHTTPService){ 

     myService.getHTMLFromBackend().subscribe(
      data => { 
        this.myHTML = this.sanitizer.bypassSecurityTrustHtml(data.content) 
      }); 
     } 
    ngOnInit() {} 
} 

然後，當你試圖在html（DOM）中使用它只是簡單地做

{{myHTML}}