从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);
}