json - 寻找通过 razor @Html.Raw(Json.Encode(Model)) 将 json 数据从 asp.net mvc 4.5 传递到 angular 2 组件的解决方案

Question

我正在尝试使用 Angular 2、TypeScript 和 ASP.NET MVC 4.5 在页面上显示数据行。我正在尝试将 JSON 传递到 Angular 2 组件中，但未能成功，并且浏览器未显示任何错误。

有谁知道如何从 .NET Controller 返回 JSON 数据，使用 (@Html.Raw(Json.Encode(Model)) 嵌入 View ，然后传递到要显示的 Angular 2 组件/模板？

这是我迄今为止尝试过的方法(基于 Plunkr 上的各种示例和 AngularJS 网站上的示例构建。我会注意到我有一个基本的 Angular 2 示例在同一解决方案中工作，所以我相信框架和工具设置正确。只是在应用它时遇到困难。我在最近的尝试中一直在引用这个 plunk: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 { }

应用.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

使用评论中 yurzui 提供的链接以及此处 evanplaice 的“hack”功能:https://github.com/angular/angular/issues/6392 , 我整理了以下解决方案。

更改仅限于 app.ts。

应用.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');
    }
}