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。

希望它可以帮到你，亨利

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

1 个答案: