如何在Angular 2组件函数中使用Angular 1指令变量

Question

var app = angular.module('addApp', []); 
app.controller('addController', ['$scope', function ($scope) { 
}]).directive('add', function(){ 
    return { 
     scope:{}, 
     template: '<input type="number" ng-model=number>', 
     controller: 'addController' 
    }; 
}); 

var adapter = new ng.upgrade.UpgradeAdapter(); 

AppComponent = ng.core.Component({ 
    selector: 'my-app', 
    template: '<add></add>sum={{sum}}', 
    directives: [adapter.upgradeNg1Component('add')] 
}).Class({ 
    constructor:function() { 
     this.frist=5; 
    }, 
    add():function{ 
     this.sum=frist+number; 
    } 
}); 

app.directive('myApp', adapter.downgradeNg2Component(AppComponent)); 
document.addEventListener('DOMContentLoaded', function() { 
    adapter.bootstrap(document.body, ['addApp']); 
    console.log(adapter); 
}); 

我已经使用UpgradeAdapter将上述Angular 1代码升级到Angular 2。

我想使用Angular 2进一步编写应用程序。所以我想在角度组件中使用输入数字。

Answer 1

我认为唯一的可能性是使用Angular2插值将组件的对象传递给Angular1指令，以便后者可以将输入绑定到它。由于Angular2指令不支持这种字段的双向绑定，因此原始类型不能在此级别使用。您需要为您的值提供“容器”对象，以便您可以通过引用更新容器并在Angular1指令和Angular2组件之间共享数据。

在这种情况下，您必须为您的指令定义一个子范围。 “范围”可以在Angular1指令和Angular2组件之间共享。

这里是我推荐的方法：

var app = angular.module('addApp', []); 
app.controller('addController', ['$scope', function ($scope) { 

}]).directive('add', function(){ 
    return { 
    scope: { 
     number: '=' 
    }, 
    template: '<input type="number" ng-model="number.value">', 
    controller: 'addController' 
    }; 
}); 

的Angular2组件将用于数提供一种容器：

AppComponent = ng.core 
.Component({ 
    selector: 'my-app', 
    template: ` 
    <add [number]="number"></add> 
    <span (click)="add()">add</span> 
    sum={{sum}} 
    `, 
    directives: [adapter.upgradeNg1Component('add')] 
}) 
.Class({ 
    constructor:function() { 
    this.frist = 5; 
    this.number = { value: 10 }; 
    }, 
    add() { 
    this.sum = this.frist + this.number.value; 
    } 
}); 

这里是对应plunkr：https://plnkr.co/edit/M4m4aZMNr3yc7TgMD9Ko?p=preview。

希望它可以帮助你， 蒂埃里