如何在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。

希望它可以幫助你， 蒂埃裏