Angular 1 中的 Angular 2 组件？答案

【问题标题】：Angular 2 component inside Angular 1?Angular 1 中的 Angular 2 组件？
【发布时间】：2016-03-02 19:42:41
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs angular angularjs-controller

【解决方案1】：

这应该使用升级适配器模块（Angular 2 附带）来完成。

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

您可以使用我的超级简单的 Todo 应用程序示例（只需查看“升级”分支内的步骤的提交）： Todo-app example

这是你的引导文件的样子：

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']);

这是控制器模板的示例（Angular 1）：

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

【讨论】：

嗨 Yaniv，我查看了您发布的 repo 的升级分支，但我找不到在您的 ng2 组件中使用 \@input 或 \@output 的任何示例，就像问题是问。我什至没有看到您引用的代码（用于控制器模板）。您是否有在 ng1 应用程序中使用 ng2 组件的 \@input 或 \@output 的工作示例？这是我的团队一两天以来一直在努力解决的问题。谢谢。