[英]Binding from mvc model to angular2 component (Components in mvc project)
I could use some help, figure out how to pass model data from mvc application to a angular2 component running inside mvc. 我可以使用一些帮助,弄清楚如何将模型数据从mvc应用程序传递到在mvc中运行的angular2组件。
Lets say I have a cs.html file that has an component 可以说我有一个包含组件的cs.html文件
<my-app></my-app>
This will load the angular2 component. 这将加载angular2分量。 I need to generate some binding to keep mvc models intact with my angular2 models.
我需要生成一些绑定以使mvc模型与我的angular2模型保持完整。
First of all, I'm trying to pass a model to the component via the Input property. 首先,我试图通过Input属性将模型传递给组件。
CSHTML file: CSHTML文件:
In the top of my cshtml file, I have: 在我的cshtml文件的顶部,我有:
@model MainModel
<script>
var model = @Html.Json(Model.Form.PassengerModel);
</script>
I want to pass this model to my angular2 component. 我想将此模型传递给我的angular2组件。 What I have tried are:
我尝试过的是:
<my-app passengerModel="model"></my-app>
Angular2 component: 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
) { }
}
The problem is that the model is undefined always. 问题在于该模型始终是未定义的。 Is there any way to pass a model in to the component?
有什么方法可以将模型传递给组件?
The problem you have outlined above is that your binding is not correct for the context you are attempting to use it in. 上面概述的问题是,对于您尝试在其中使用上下文的绑定不正确。
<my-app passengerModel="model"></my-app>
The above line is telling Angular to bind passengerModel inside your my-app component to a property on the host component named model. 上一行告诉Angular将my-app组件内的passengerModel绑定到名为model的主机组件上的属性。 This means the page (component) which hosts your my-app component should be a component with a property named model.
这意味着承载my-app组件的页面(组件)应该是具有名为model的属性的组件。 You have created a global variable which is not in the scope of your host component.
您创建的全局变量不在主机组件的范围内。 Angular2 specifically isolates the scope of each component so that you do not accidentally introduce unwanted side effects.
Angular2专门隔离了每个组件的范围,因此您不会意外引入有害的副作用。
Save yourself some pain an anguish and embrace Angular fully. 避免痛苦和痛苦,完全拥抱Angular。 Ditching your MVC Page Controllers and moving to WebApi service calls will yield better results and save you the need to translate the model manually among other issues you will run into going down the mixed route.
抛弃您的MVC页面控制器并转到WebApi服务调用将产生更好的结果,并且省去了手动转换模型的麻烦,因为您会遇到其他问题。
Considerations: 注意事项:
[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 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.