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

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

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

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

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

Welcome to the Angular 2 components!

亲切的问候,

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

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

例:

 //index.cshtml  Loading...  //app.component.ts import {Component, Input, ElementRef} from '@angular/core'; @Component({ selector: 'my-app', template: '
username: {{username}}
' }) export class AppComponent { constructor(private elementRef: ElementRef) {} username: string = this.elementRef.nativeElement.getAttribute('username') }

如果要检索更多不适合属性的复杂数据,可以使用相同的技术,只需将数据放入HTML 元素或隐藏的元素中,然后使用plain JS来检索值。

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

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

您可能想要查找与AngularJS相关的类似问题,而不是Angular 2特定的问题,因为事物的主要要点保持不变:

  • 你希望你的服务器端Razor引擎呈现某种视图(即直接HTML或JS)
  • 此视图包含一个JS模板,其中部分内容从服务器模型实例或无论如何服务器数据(例如资源,字典等)填充
  • 为了从Razor中正确填充JS变量,必须将C#服务器端数据正确序列化为JSON格式

在Marius Schulz的这篇文章中 ,您可以看到他序列化数据并使用它来填充模板AngularJS value组件:

  

可以将类似的内容注入到window.myNamespace.myServerData ,然后在其他提供程序中使用Angular2引导程序。

在Roel van Lisdonk的这篇文章中 ,使用类似的方法再次使用ng-init指令填充基于AngularJS的模板:

 

{{ title }}

{{ resources.textFromResource }}

正如第一篇文章指出的那样,有一些事情可以考虑(粘贴在这里):

需要注意的是:我即将使用的方法可能不适合大量数据。 由于JavaScript数据被内联到HTML响应中,因此每次请求该页面时都会通过网络发送。

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

如果您的服务页面已经是动态服务器端,即如果它已经从服务器端数据填充了位,则第二部分可能不是问题。

HTH

您可以使用@angular/core公开的Input函数,例如我有一个Angular 2组件来向应用程序的用户显示信息消息

我的HTML模板采用Angular 2 Message属性

 
{{ Message }}

例如, Message属性作为输入传递给名为informationmessage.component.ts的Angular 2组件

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

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

  

例如,您可以使用从MVC控制器获得的数据替换上例中的InformationMessage

  

请注意:我没有测试这种情况,但没有技术原因使它不起作用,在一天结束时你只是将一个值绑定到Angular 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中加载脚本如下

   

这样,您可以在加载时将数据注入角度代码。 但是,由于花在获取视图,编译视图和将数据绑定到视图上所花费的时间,这甚至会对性能产生影响。 对于初始加载,如果使用服务器端渲染,仍然可以提高性能。

我找到了一个更简单的解决方案。 不要尝试从构造函数中获取属性! 请改用ngOnInit() 钩子 。 只要用@Input()修饰,该属性就可以访问。 看起来它在构造函数被调用时不可用。

组件HTML:

  

组件TS:

 export class MyComponentComponent { @Input() public CustomAttribute: string; constructor() {} ngOnInit() { console.log("Got it! " + this.CustomAttribute); } } 

SRC / ApplicationConfiguration.ts

 export class ApplicationConfiguration { public setting1: string; public setting2: string; } 

SRC / main.ts

 declare var config : ApplicationConfiguration; var providers = [{ provide: ApplicationConfiguration, useValue: config }]; platformBrowserDynamic(providers).bootstrapModule(AppModule) .catch(err => console.log(err)); 

SRC / index.html的

   

SRC /应用程序/ app.component.ts

 export class AppComponent { private _config : ApplicationConfiguration; constructor(config: ApplicationConfiguration) { this._config = config; } }