mvcモデルからangular2コンポーネントへのバインド（mvcプロジェクトのコンポーネント）

Question

mvcアプリケーションからmvc内で実行されているangular2コンポーネントにモデルデータを渡す方法を説明します。

は、私はコンポーネント

<my-app></my-app> 

これはangular2コンポーネントをロードしますがありcs.htmlファイルを持っているとしましょう。私は、私のangular2モデルでmvcモデルをそのまま維持するためにバインディングを生成する必要があります。

まず、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> 

上の行は、あなたの私のアプリのコンポーネント内passengerModelをバインドするために角度を語っていますmodelという名前のホストコンポーネント上のプロパティに追加します。つまり、my-appコンポーネントをホストするページ（コンポーネント）は、modelという名前のプロパティを持つコンポーネントである必要があります。ホストコンポーネントのスコープにないグローバル変数を作成しました。 Angular2は、誤って不要な副作用を導入しないように、各コンポーネントのスコープを明確に分離します。

痛みを軽減し、角を完全に抱きしめます。 MVCページコントローラーを切り離してWebApiサービスコールに移動すると、結果が向上し、混在ルートをダウンする際に実行するその他の問題の中で手動でモデルを変換する必要がなくなります。

考慮事項：Html.Json @

• は最終的にあなたのデータはあなたのスクリプトタグ内に直接さらされることになります。これは、データが機密である場合にセキュリティ上のリスクになる可能性があります。また、Angularバインディングと共にページ内のMVC Modelバインディングを使用すると、互いに戦います。
• 基本的に、ASP.NET MVCはサーバーサイドのアプローチであり、Angularはクライアント側のアプローチなので、これらのアプローチは正反対です。同じアプリケーションでそれらをミックスすることは、常に最高の状態では厄介です。
• WebApiは多かれ少なかれJSONシリアライズを無料で提供します。 MVCモデルは、HttpActionを返すときにフレームワークによってJSONに自動的にシリアル化されます。 ASP.NET MVCビューをAngular Componentsに変換しないようにしたいのであれば、私は理解しています。あなたは選択肢がないかもしれませんが、もしそうなら、私はこれらの2つを混ぜるのをやめてしまいます。ちょうどあなたが書いたものに基づいて

[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

​​