如何将数据从asp.NET MVC传递到Angular2

Question

将数据从ASP.NET MVC控制器传递到Angular 2.0组件的最佳方法是什么.例如,我们使用ASP.NET MVC模型,并希望将它的JSON版本发送给Angular,因此我们可以在Angular中使用它.

在控制器为视图提供服务的那一刻,我们已经能够将一些数据推送到Angular2(模型).因此不需要额外的AJAX调用来获取该数据.

但是我正在努力将它"注入"Angular组件.你怎么做到这一点？对此有什么好的参考？你可能已经注意到了,我对Angular2很新.

我的index.cshtml看起来像这样.

<div class="container">
<div>
    <h1>Welcome to the Angular 2 components!</h1>
</div>
<div class="row">
    <MyAngular2Component>
        <div class="alert alert-info" role="alert">
            <h3>Loading...</h3>
        </div>
    </MyAngular2Component>
</div>
</div>

亲切的问候,

抢

Answer 1

我发现从MVC(或任何托管/启动页面)传递数据的最佳方法是将数据指定为引导组件上的属性,并用于ElementRef直接检索值.

下面是从这个答案派生的MVC的一个例子,它说明不可能@Input用于根级别的组件.

例:

//index.cshtml
<my-app username="@ViewBag.UserName">
    <i class="fa fa-circle-o-notch fa-spin"></i>Loading...
</my-app>


//app.component.ts
import {Component, Input, ElementRef} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<div> username: <span>{{username}}</span> </div>'
})
export class AppComponent {
    constructor(private elementRef: ElementRef) {}

    username: string = this.elementRef.nativeElement.getAttribute('username')
}

如果要检索不适合属性的更复杂数据,可以使用相同的技术,只需将数据放在HTML <input type='hidden'/>元素或隐藏<code>元素中,然后使用纯JS来检索值.

myJson: string = document.getElementById("myJson").value

警告:直接从数据绑定应用程序(如Angular)访问DOM,打破数据绑定模式,应谨慎使用.

Answer 2

您需要首先将服务和控制器捆绑在单独的模块文件中，并在控制器之前加载服务。例如：

dist
|--services.js
|--controllers.js

然后您需要通过 ASP.NET MVC JavaScript 结果加载服务的 JavaScript 代码，这里您需要注入启动数据。

public class ScriptController: Controller
{
  public ActionResult GetServices(){
   string file= File.ReadAllText(Server.MapPath("~dist/services.js"));
   //modify the file to inject data or 
   var result = new JavaScriptResult();         
   result.Script = file;
   return result;     
}

然后在index.html中加载脚本如下

<script src="/script/getservices"></script>
<script src="/dist/controller.js"></script>

这样您就可以在加载时将数据注入到角度代码中。然而，由于获取视图、编译视图以及将数据绑定到视图所花费的时间，即使这样也会对性能产生影响。对于初始加载，如果使用服务器端渲染，性能仍然可以提高。