角2を使用してC＃/ .NETサービスからHTMLを返す

Question

私は角2のフロントエンドを使用するように更新したい既存の.NETアプリケーションを持っています。動的なコンテンツを持っていると私は最新のコンテンツを取得するたびに、私は現在、これにjqueryの同様の使用ページのセクションがあります：

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

データが返される正確なHTMLは、私が必要、それを操作する必要はありません。

この同じデータを返すにはどのように角度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私は、このような英雄のチュートリアルの角度2選手のツアーから、以下の例のように、JSONデータを処理する方法を参照して周りを見回したとだけしました.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コードをJSONデータではなくHTMLデータを処理するように変更するにはどうすればよいですか？既にC＃endで設定したコードを利用できますか？私はおそらくheroesUrlの値を/Plan/Variety/VarietyListに変更する必要があると思いますので、htmlの*ngForはHTMLとは関係ありませんので、データを配列として保存する必要はないと思っています。あなたがしようとしているときに

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

：

EDIT：ここに は私のコントローラから返された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

はこのようなものですhtml（DOM）でそれを使用するだけです。

{{myHTML}}