Angular 1中的Angular 2组件？

Question

I want to add an Angular 2 component inside my Angular 1 controller, so the Angular 1 controller is a parent and Angular 2 component is a child. I would like a child and parent be able to exchange data between each other like using @Input and @Output in Angular 2. Does anyone know how to do that?

Answer 1

This should be done using Upgrade Adapter module (shipped with Angular 2).

The steps should be: 1. Bootstrap you app using the adapter, instead of ng-app 2. Downgrade your angular 2 component and wrap it with Angular 1 directive.

You can use my super simple Todo app example (just look into the commits for the steps inside 'upgrade' branch): Todo-app example

This is how your bootstrap file look like:

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

And this is an example of the controller's template (Angular 1):

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