Угловая 2 компонента внутри Угловая 1?

Question

Я хочу добавить компонент Angular 2 внутри моего контроллера Angular 1, поэтому регулятор Angular 1 является родительским, а компонент Angular 2 - дочерним. Я хотел бы, чтобы ребенок и родитель могли обмениваться данными между собой, используя @Input и @Output в Angular 2. Кто-нибудь знает, как это сделать?

Answer 1

Это должно быть сделано с использованием модуля адаптера обновления (поставляется с угловым 2).

Действия должны быть следующими: 1. Загрузите приложение, используя адаптер, вместо ng-app 2. Снизьте свой угловой компонент 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']); 

И это пример шаблона контроллера (угловые 1):

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