javascript - 无法使用 upgradeNg1Component() 在 Angular 2 应用程序中使用 Angular 1 指令

Question

我正在尝试使用 Angular 1 和 2 制作一个混合 Angular 应用程序。我有一个简单的 Angular 1 指令:

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

我想在我的 Angular 2 应用程序中使用这个指令。所以我使用 upgradeNg1Component() 像这样转换它:

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

虽然我运行它时出现此错误:

EXCEPTION: No provider for $scope! (function (scope, elementRef)

有人可以帮忙吗？或者，如果有人知道在 Angular 2 应用程序中使用 Angular 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 特定部分和降级机制。