從mvc模型綁定到angular2組件（mvc項目中的組件）

Question

我可以使用一些幫助，弄清楚如何將模型數據從mvc應用程序傳遞到在mvc中運行的angular2組件。

可以說我有一個包含組件的cs.html文件

<my-app></my-app>

這將加載angular2分量。 我需要生成一些綁定以使mvc模型與我的angular2模型保持完整。

首先，我試圖通過Input屬性將模型傳遞給組件。

CSHTML文件：

在我的cshtml文件的頂部，我有：

@model MainModel
<script>
    var model = @Html.Json(Model.Form.PassengerModel);
</script>

我想將此模型傳遞給我的angular2組件。 我嘗試過的是：

<my-app passengerModel="model"></my-app>

Angular2組件：

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

@Component({
    selector: 'my-app',
    templateUrl: './Content/Scripts/angular2components/app.component.html',
})
export class AppComponent {
    @Input() passengerModel: PassengerModel;

    constructor() {
        console.log("Model loaded?: " + this.passengerModel);

    }

}

export class PassengerModel {
    constructor(
        public Adults: number,
        public Children: number
    ) { }
}

問題在於該模型始終是未定義的。 有什么方法可以將模型傳遞給組件？

Answer 1

上面概述的問題是，對於您嘗試在其中使用上下文的綁定不正確。

<my-app passengerModel="model"></my-app>

上一行告訴Angular將my-app組件內的passengerModel綁定到名為model的主機組件上的屬性。 這意味着承載my-app組件的頁面（組件）應該是具有名為model的屬性的組件。 您創建的全局變量不在主機組件的范圍內。 Angular2專門隔離了每個組件的范圍，因此您不會意外引入有害的副作用。

避免痛苦和痛苦，完全擁抱Angular。 拋棄您的MVC頁面控制器並轉到WebApi服務調用將產生更好的結果，並且省去了手動轉換模型的麻煩，因為您會遇到其他問題。

注意事項：

• @ Html.Json最終將導致您的數據直接在腳本標簽中公開。 如果數據很敏感，並且您開始在頁面中與Angular綁定一起使用MVC Model綁定，那么這可能會帶來安全風險。
• 基本上，這些方法是截然相反的，因為ASP.NET MVC是服務器端方法，而Angular是客戶端方法。 在同一個應用程序中混合它們總是很尷尬。
• WebApi免費為您提供或多或少的JSON序列化。 當您返回HttpAction時，框架會將您的MVC模型自動序列化為JSON。 如果您試圖避免將ASP.NET MVC視圖轉換為Angular Components，那么我理解。 您可能別無選擇，但是如果您這樣做，我將避免將這兩者混為一談。

[HttpGet]
[AcceptVerbs["GET"]
[Route("passengers/{id:int}")]
public IHttpActionResult GetPassenger(int id)
{
    // For illistration...
    try
    {
        var passengerModel = PassengerService.LoadPassenger(id);
        return Ok(passenger);
    }
    catch(Exception e)
    {
        return InternalServerError(e);
    }
}

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

// I would normally put this in the environemnt class..
private passengerUrl = 'api/passengers';  // URL to web api

constructor(private http: Http) { }

getPassenger(id: number): Promise<Passenger> {
    return this.http.get(`this.passengerUrl/${id}`)
        .toPromise()
        .then(response => response.json() as Passenger)
        .catch(this.handleError);
}

private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
}