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 方式”——这意味着通过属性和事件与其父组件进行通信。这是我的演示项目（组件分解用破折号标记）

我能想到的唯一方法是不使用 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()">