Angular 2 - 无法使用 ng-content 和绑定将数据传递到根组件。目标：可重用的表单组件

Question

我有一个现有的 .NET MVC 应用程序，我想在其中使用 Angular 2。我有一个类似于此的页面 (shorthand):

<html>
<head>css imports and jquery imports</head>
<body>
    <div>
        a bunch of tables existing in the HTML outputed by razor
    </div>
    <myForm postLocation='Management/User/Add'>
        <form #addForm="ngForm" (ngSubmit)="submitAddForm(addForm)">
            Username:
            <input ([ngModel])="user.username" type="text" required />
        </form>
    </myForm>
</body>
</html>

要点是我正在尝试制作一个可重用的表单组件，该组件具有通过 ng-content 传入的表单输入。我传入 post 位置，以便 http post 知道到 post 的位置。该组件如下所示：

import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Http, Response } from '@angular/http';

@Component({
    selector: 'myForm',    
    template: `<ng-content></ng-content>`,
})

//The component that controls the datatable add form.
export class myForm {
    //Constructor
    constructor() {

    }

    //Properties
    @Input() postLocation: string;

    submitted = false;

    //Functions
    submitAddForm(form: NgForm) {
        console.log(form.value);
        console.log("Post Location: " + this.postLocation);
    }
}

页面加载时，整个表单从页面上消失。如果我查看源代码，我仍然可以看到 html 中的代码。控制台中没有错误。

如果我改为将我的表单和输入放入单独的 cshtml 文件中，并执行控制器操作以通过 templateURL 将其拉入应用程序，我会在页面上看到内容，但 post位置未填写。未定义。

我怎样才能让它工作？我希望 myForm 与我传入的页面上的现有 html 一起使用。

我有一个模型在 AngularJS 中工作。我现在正在为至少再使用十年的应用程序重新设计前端 js 框架。如果现在支持 angular 2，我觉得现在使用 angularjs 可能是一个糟糕的决定。

Answer 1

根组件目前不支持嵌入，但已在计划中。

另见 https://github.com/angular/angular/issues/4946

Angular 2 - 无法使用 ng-content 和绑定将数据传递到根组件。目标：可重用的表单组件

Angular 2 - Unable to pass data into root component using ng-content and binding. Goal: Reuseable form component

asp.net-mvc

razor

typescript

angular2-components

angular