尋找一種解決方案，通過razor @ Html.Raw（Json.Encode（Model））將json數據從asp.net mvc 4.5傳遞到角2組件。

Question

我試圖使用Angular 2在頁面上顯示數據行，TypeScript和ASP.NET MVC 4.5。我試圖將JSON傳遞到Angular 2組件，但是我一直無法成功，並且瀏覽器沒有顯示任何錯誤。

有誰知道如何從.NET控制器返回JSON數據，使用（@ Html.Raw（Json.Encode（Model））嵌入視圖中，然後傳入要顯示的Angular 2組件/模板（從Plunkr上的各種示例和AngularJS站點的示例構建而成）我會注意到，我有一個基本的Angular 2示例工作在相同的解決方案中，所以我相信框架和工具設置正確只要有應用它的困難我一直在引用此普拉克我的最新嘗試：。http://plnkr.co/edit/LEtEN9?p=preview

筆者認爲：

個

<my-app holdings="@Html.Raw(Json.Encode(Model))">Loading...</my-app> 

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './boot'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

boot.ts：

///<reference path="./../typings/globals/core-js/index.d.ts"/> 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app'; 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.ts：

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: `  
    <ul> 
     <li *ngFor="let report of holdings"> 
     {{ report.CorpName }} 
     </li> 
    </ul> 
    ` 
}) 
export class AppComponent { 
    @Input() holdings: any; 
} 

謝謝您的幫助！

Answer 1

使用evanplaice這裏通過在註釋中還有「黑客」功能yurzui提供的鏈接：https://github.com/angular/angular/issues/6392，我總結了以下解決方案。

更改僅限於app.ts.

app.ts：

import { Component, Input, ElementRef } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul> 
     <li *ngFor="let report of hack(holdings)"> 
     {{ report.CorpName }} 
     </li> 
    </ul> 
    ` 
}) 
export class AppComponent { 

    hack(val) { 
     console.log('Before:'); 
     console.log(val); 
     val = JSON.parse(val); 
     console.log('After:'); 
     console.log(val); 
     return val; 
    } 

    @Input() holdings: any; 

    constructor(elm: ElementRef) { 
     this.holdings = elm.nativeElement.getAttribute('holdings'); 
    } 
}