Angular 1中的Angular 2組件？

Question

我想在Angular 1控制器中添加一個Angular 2組件，因此Angular 1控制器是父控件，Angular 2組件是子控件。 我希望孩子和家長能夠在Angular 2中使用@Input和@Output之間互相交換數據。有誰知道怎么做？

Answer 1

這應該使用升級適配器模塊（Angular 2附帶）完成。

步驟應該是：1。使用適配器而不是ng-app啟動應用程序2.降級角度2組件並使用Angular 1指令包裝它。

你可以使用我的超級簡單的Todo應用程序示例（只需查看'upgrade'分支內部步驟的提交）： Todo-app示例

這就是你的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']);

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

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