如何将数据从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!
Loading...
亲切的问候,
抢
我发现从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; } }