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

【问题标题】：Looking for a solution to passing json data from asp.net mvc 4.5 to an angular 2 componet via razor @Html.Raw(Json.Encode(Model))寻找通过剃刀 @Html.Raw(Json.Encode(Model)) 将 json 数据从 asp.net mvc 4.5 传递到 angular 2 组件的解决方案
【发布时间】：2017-08-22 02:00:26
【问题描述】：

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

有谁知道如何从 .NET 控制器返回 JSON 数据，使用 (@Html.Raw(Json.Encode(Model)) 嵌入到视图中，然后传递到要显示的 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 { }

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;
}

感谢您的帮助！

【问题讨论】：

stackoverflow.com/questions/39614451/…

标签： json asp.net-mvc angular typescript asp.net-4.5

【解决方案1】：

使用 cmets 中 yurzui 提供的链接以及 evanplaice 在此处的“hack”功能：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');
    }
}

【讨论】：