javascript - Angular 1 中的 Angular 2 组件？

Question

我想在我的 Angular 1 Controller 中添加一个 Angular 2 组件，因此 Angular 1 Controller 是一个父组件，而 Angular 2 组件是一个子组件。我希望 child 和 parent 能够像在 Angular 2 中使用 @Input 和 @Output 一样在彼此之间交换数据。有人知道该怎么做吗？

Answer 1

这应该使用升级适配器模块(随 Angular 2 一起提供)来完成。

步骤应该是: 1. 使用适配器引导您的应用程序，而不是 ng-app 2. 降级你的 Angular 2 组件并用 Angular 1 指令包装它。

您可以使用我的 super 简单的 Todo 应用程序示例(只需查看“升级”分支中步骤的提交): Todo-app example

这是你的 Bootstrap 文件的样子:

declare var angular: any;

import {UpgradeAdapter} from 'angular2/upgrade';
import {TodoList} from "./components/todo-list";
import {TodoInput} from "./components/todo-input";
import {TodoApp} from "./components/todo-app";

let adapter = new UpgradeAdapter();

angular.module('todoListWorkshopApp').directive('todoList', adapter.downgradeNg2Component(TodoList));

angular.module('todoListWorkshopApp').directive('todoInput', adapter.downgradeNg2Component(TodoInput));

angular.module('todoListWorkshopApp').directive('todoApp', adapter.downgradeNg2Component(TodoApp));

adapter.bootstrap(document.body, ['todoListWorkshopApp']);

这是 Controller 模板的示例(Angular 1):

<div>
  <todo-input (on-item-added)="add($event)"></todo-input>
  <todo-list [todos]="todos"></todo-list>
</div>