Angular 2.0迁移路径

Question

我正在准备一个关于“为今天的Angular 2.0做好准备”的讨论，我打算谈谈为了使迁移路径更容易所需的应用程序结构更改（我知道，Angular 2.0尚未准备好，但基本概念是准备）。

我开始了一个演示项目，以演示一个“之前”的应用程序，用简单的“旧”Angular 1.x方式编写。然后，我打算将此应用程序的结构更改为组件树，并通过属性在组件（指令）之间进行通信（类似于Angular 2中的属性绑定和事件绑定。事件绑定将通过属性事件方法）。下一步将更改代码以使用Typescript，然后最后一部分将使用实际的Angular 2.0编写相同的应用程序。

我的问题是 - 我有使用ng-model和双向数据绑定在Angular 1.x中编写的html输入。我想把它改成尽可能多的“Angular 2 way” - 意思是通过属性和事件与他们的父组件进行通信。这是我的演示项目（组件细分用破折号标记）

我能想到的唯一方法就是不使用ng-model，如：

<input ng-keyup="ctrl.event()" value={{ctrl.value}} />

任何评论都将受到高度赞赏!!

Answer 1

为了使它成为Angular 1方式中最简单的方法，最简单的方法是在Angular 2 ng-model中使用模板驱动形式（参见here），并将其与ng-model Angular 1形式进行比较。除了一些模板语法更改外，它们应该看起来非常相似。点击此处查看正在运行的example。

如果您不想使用表单构建器API，则可以在没有它的情况下使用ng-model，因为它只将模型与视图同步，反之亦然。这将是输入的Angular 2版本：

<input [(ng-model)]="value" (keyup)="event()">