Question

我正在尝试使用Angular 1＆amp; amp;我有一个简单的角度1指令：

<input ng-change="userDecision || doSomething()">

我想在我的angular 2应用程序中使用此指令。所以我使用upgradeNg1Component（）转换它，如下所示：

var sample = angular.module('interestApp',[]);
sample.directive('myComp', function() {
  return {
    scope:{},
restrict: 'E',
template: '<div>My name is </div>'
}
});

我在运行时遇到此错误：

const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['interestApp']);
@Component({
    selector: 'angular2',
    template: '<myComp></myComp>',
    directives: [upgradeAdapter.upgradeNg1Component('myComp')]
})

任何人都可以帮忙吗？或者，如果有人知道在角度2应用程序中使用角度1指令的任何其他方式，那将非常有帮助。

Answer 1

到目前为止，您的代码看起来很好，但似乎缺少一部分。当您升级ng1组件以使用选择器angular2（我建议更改）在Angular 2组件中使用它时，您不会再次降级该Angular 2组件以在引导的Angular 1中实际使用它应用

只要您正在升级应用程序，这就是您必须要做的事情。为了实现Angular 2组件，您需要在A1中使用它作为指令，因此需要降级。所以你需要做某事。像：

@Component({
    selector: 'my-ng2-component',
    template: '<myComp></myComp>',
    directives: [upgradeAdapter.upgradeNg1Component('myComp')]
})
class MyNg2Component {

}

angular.module('interestApp', [])
    .directive('myComponent', {...})
    .directive('myNg2Component', upgradeAdapter.downgradeNg2Component(MyNg2Component);

upgradeAdapter.bootstrap(document.body, ['interestApp']);

完成升级后，您可以删除所有Angular 1特定部件和降级机制。

Answer 2

在HTML中，您是否引用了组件/指令的两个版本？

对我来说，只要我引用了两个组件的Angular2版本，就会发生这种情况：

降级为AngularJS
在其模板中引用了升级的AngularJS指令。

就我而言，我为NG2定义了<ng2-component>，为NG1定义了<downgraded-ng2-component>，并在我的HTML中引用了它们。这导致了错误。

我发现在使用Angular 2.0.0-beta.0时，我必须避免在遇到上述情况（1）和（2）时使用原始的Angular2组件。

使用upgradeNg1Component（）无法在Angular 2 app中使用Angular 1指令

2 个答案: