如何在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编写应用程序。因此，我想在angular组件中使用输入数字。

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。

希望对您有帮助，蒂埃里