如何将数据从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

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

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> 

这种方式可以注入数据而加载角的代码。 但是，即使这样，由于花费在获取视图，编译视图以及将数据绑定到视图上所花的时间，也会产生性能影响。如果使用服务器端渲染，初始加载性能仍可以得到改进。

Answer 2

您可能要查找与AngularJS类似的问题，没有棱角2特异性的，因为事物的主要依据仍然是相同的：

• 你希望你的服务器端剃刀引擎渲染某种（即HTML或JS直接）
• 该视图包含一个JS模板，其中部分内容从服务器模型实例或服务器数据（例如资源，字典等）填充，以便从Razor正确填充JS变量，C＃服务器端数据必须正确序列化为JSON格式

在this post马吕斯舒尔茨你可以看到他的串行数据，并使用该填充模板AngularJS value组件：

<script> 
    angular.module("hobbitModule").value("companionship", @Html.Raw(Model)); 
</script> 

类似的东西可以作出如注入一些数据分成window.myNamespace.myServerData，然后在其他提供商中使用Angular2引导。

在this post通过罗埃尔面包车Lisdonk，类似的方法被使用，再一次，填补了基于AngularJS模板，与ng-init指令：

<div ng-controller="main" 
    ng-init="resources={ textFromResource: '@WebApplication1.Properties.Resources.TextFromResource'}"> 
    <h1>{{ title }}</h1> 
    {{ resources.textFromResource }} 
</div> 

正如第一篇文章指出，有一些思考大约（粘贴在这里）：

一句话警告：我要使用的方法可能不适合大量数据。由于JavaScript数据内嵌到HTML响应中，因此每次请求该页面时都会通过网络发送该数据。

此外，如果数据是特定于经过身份验证的用户，则无法将响应缓存并传递给不同的用户。请考虑以这种方式使用.NET数据引导您的Angular Apps时请牢记这一点。

如果您服务的页面已经是动态服务器端的，即它已经有位填充了服务器端数据，那么第二部分可能不太成问题。

HTH

Answer 3

可以使用Input功能由@angular/core暴露，我有例如一个角2部件以显示信息消息发送到应用程序的用户

我的HTML模板采取角2 Message属性

<div class="alert alert-info col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1"> 
    <i class="fa fa-info-circle"></i> {{ Message }} 
</div> 

的Message属性被作为输入提供给我的角2个成分命名informationmessage.component.ts通过，例如

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'informationmessage', 
    templateUrl: '../Templates/informationmessage.component.html' 
}) 
export class InformationMessageComponent { 
    @Input() Message: string; 
} 

然后，我使用HTML页面中的属性绑定将数据传递到我的InformationMessageComponent。

<informationmessage [Message]="InformationMessage"></informationmessage> 

您可以用数据上面的例子，你从你的MVC控制器获得例如更换InformationMessage

<informationmessage [Message]="@Model.InformationMessage"></informationmessage> 

请注意：我没有测试这种情况下，但没有技术原因，它不工作，在一天结束时，你只是将一个Angular 2属性绑定到一个值。

Answer 4

我发现从MVC（或任何托管/启动页面）传入数据的最佳方式是将数据指定为引导组件上的属性，并使用ElementRef直接检索值。

下面是从this answer导出的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 

警告：访问DOM直接从数据绑定应用程序，如角，断数据绑定图案，并且应当谨慎使用。

Answer 5

我发现了一个更简单的解决方案。不要尝试从构造函数中获取属性！改为使用ngOnInit()hook。只要使用@Input()进行装饰，该物业即可使用。看起来它在构造函数被调用时不可用。

组件的HTML：

<MyComponent [CustomAttribute]="hello"></MyComponent> 

组件TS：

export class MyComponentComponent { 
    @Input() 
    public CustomAttribute: string; 

    constructor() {} 

    ngOnInit() { 
     console.log("Got it! " + this.CustomAttribute); 
    } 
}