如何將數據從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); 
    } 
}